CSS翻转动画在浏览器中有所不同

下面是一个简单的水平翻转动画-
我看到两个问题：

在chrome中打开url。将鼠标悬停在红色div上。翻转可以，但不应用后div（蓝色）的背景色

在firefox中打开url。翻转就像卡住了一样。我有时能看到蓝色的背罩

我猜它被“卡住”在这里是因为高度是

100vh

，当降低高度时可以正常工作，但它是否也应该在全高度下工作

.flip容器{
宽度：150px；
高度：100vh；
透视图：800px；
颜色：#fff；
位置：相对位置；
}
.鳍状肢{
宽度：100%；
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
过渡：变换线性0.6s；
}
.鳍状肢部{
保证金：0；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.脚蹼，前面{
背景：红色；
}
.鳍状肢组：之后{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
左：0；
背景图像：url（“http://www.transparenttextures.com/patterns/3px-tile.png");
宽度：100%；
身高：100%；
不透明度：0.5；
z指数：1；
}
.脚蹼，背{
背景：蓝色；
变换：旋转（180度）；
}
.鳍状肢：悬停{
变换：旋转（180度）；
}

单面
单后卫

删除：

backface-visibility: hidden;

---

将使背景色可见

在父div（翻转容器）中添加隐藏的溢出。当我们使用带有旋转变换属性的100vh（视图端口高度）时，它实际上比视图端口所具有的高度要高。所以使用溢出隐藏来隐藏它

css

.flip-container {
    overflow:hidden;
}

要在两个浏览器中获得相同的悬停效果，必须修改悬停CSS

---

铬的问题是由伪元素引起的。我已经改变了在不使用psedou元素的情况下将图像与红色混合的方法，现在它可以正常工作了

FF中的问题是由接收悬停的元素的大小减小引起的。我已经更改了悬停，使其由容器触发，现在它也可以正常工作

避免在转换的元素上使用鼠标悬停总是一个好主意，因为它们通常会带来一些问题

.flip容器{
宽度：150px；
高度：100vh；
透视图：800px；
颜色：#fff；
位置：相对位置；
}
.鳍状肢{
宽度：100%；
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
过渡：变换线性0.6s；
}
.鳍状肢部{
保证金：0；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.脚蹼，前面{
背景：红色；
背景图像：线性渐变（rgba（255,0,0,0.5），rgba（255,0,0.5）），url（“http://www.transparenttextures.com/patterns/3px-tile.png");
}
.脚蹼，背{
背景：蓝色；
变换：旋转（180度）；
}
.flip容器：悬停.flipper{
变换：旋转（180度）；
}

单面
单后卫

我认为动画会“卡住”，因为当div变窄时，鼠标不再悬停在元素上（在Firefox中）。如果我用鼠标（从左到右）跟随动画，效果会很好。谢谢施宾。firefox中存在一个问题。翻转是平滑的，蓝色在后div中可见。但是当您将指针从蓝色div移开时，颜色消失，然后翻转回红色。这在chrome中不会发生