问

使用webkit 3d转换,CSS悬停不止一次

曾那么执着o的厮守发布于 2023-02-02 20:55

webkit

当我在悬停时使用webkit 3d变换时,只有悬停区域的前50%可用,而底部50%不稳定.我目前正在测试Chrome(31.0.1650.63).这是一个错误吗？有没有解决方法？

尝试将鼠标放在div的顶部,然后慢慢将其放在底部.

HTML



    front
    back

CSS

.hoverArea, .flip, .front, .back {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
.hoverArea {
  z-index: 10;
}
.flip {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -webkit-perspective: 800;
  z-index: 9;
}
.front {
  background-color: #f00;
  -webkit-backface-visibility: hidden ;
}
.back {
  background-color: #f0f;
  -webkit-transform: rotatex(-180deg);
  -webkit-backface-visibility: hidden ;
}
.hoverArea:hover + .flip {
  -webkit-transform: rotatex(-180deg);  
}

http://jsfiddle.net/4P53y/

1 个回答

您可以通过删除.hoverArea元素来修复它,而是在元素上应用:hover事件.flip.
```
.flip:hover {
    -webkit-transform: rotatex(-180deg);    
}
```
演示

如果您仍想使用该.hoverArea元素,则可以使用transform:translateZ(1px);on .hoverArea使其正常运行.它使浏览器更仔细地渲染元素
```
.hoverArea {
    z-index: 10;
    -webkit-transform:translateZ(1px);
}
```
演示
2023-02-02 21:04 回答

傲慢的寒风呼啸_539

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签