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

【问题标题】：CSS flip animation varies in browserCSS翻转动画在浏览器中有所不同
【发布时间】：2015-09-24 14:33:21
【问题描述】：

这是一个简单的水平翻转动画-http://jsfiddle.net/vntajmgh/2/
我看到了 2 个问题：

在 chrome 中打开网址。将鼠标悬停在红色 div 上。翻转没问题，但是后面的div（蓝色）的背景色没有应用。
在 Firefox 中打开网址。翻转就像卡住了。我有时可以看到蓝色的背面 div。

我猜它在这里“卡住”了，因为高度是 100vh，当它减小时可以正常工作，但它不应该也适用于全高度吗？

.flip-container {
    width: 150px;
    height: 100vh;
    perspective: 800px;
    color: #fff;
    position: relative;    
}
.flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform linear 0.6s;
}
.flipper div {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.flipper .front {
    background: red;
}
.flipper div:after {
    content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("http://www.transparenttextures.com/patterns/3px-tile.png");
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: 1;
}
.flipper .back {
    background: blue;
    transform: rotateY(180deg);
}
.flipper:hover {
    transform: rotateY(180deg);
}

<div class="flip-container">
    <div class="flipper">
        <div id="1front" class="front">1-front</div>
        <div id="1back" class="back">1-back</div>
    </div>
</div>

更新： 这是工作小提琴 - http://jsfiddle.net/gf3g8sz1/1/

【问题讨论】：

我认为动画会“卡住”，因为当 div 变窄时，鼠标不再悬停在元素上（在 Firefox 中）。如果我用鼠标（从左到右）跟随动画，它就可以工作。

标签： css

【解决方案1】：

添加一个溢出隐藏到父 div(flip-container)。当我们使用具有旋转变换属性的 100vh（视口高度）时，它实际上占用的高度比视口的高度要高。所以使用溢出隐藏来隐藏它。

css

.flip-container {
    overflow:hidden;
}

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

DEMO

【讨论】：

谢谢世斌。火狐有问题。翻转发生平滑，后 div 可见蓝色。但是，当您将指针从蓝色 div 移开时，颜色会消失，然后又会变回红色。这在 chrome 中不会发生

【解决方案2】：

删除：

backface-visibility: hidden;

将使背面颜色可见

【讨论】：

【解决方案3】：

Chrome 中的问题是由伪元素引起的。我已经改变了在没有伪元素的情况下将图像与红色混合的方式，现在它可以正常工作了。

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

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

.flip-container {
    width: 150px;
    height: 100vh;
    perspective: 800px;
    color: #fff;
    position: relative;    
}
.flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform linear 0.6s;
}
.flipper div {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.flipper .front {
    background: red;
    background-image: linear-gradient(rgba(255,0,0,0.5),rgba(255,0,0,0.5)), url("http://www.transparenttextures.com/patterns/3px-tile.png");
}
.flipper .back {
    background: blue;
    transform: rotateY(180deg);
}
.flip-container:hover .flipper {
    transform: rotateY(180deg);
}

<div class="flip-container">
    <div class="flipper">
        <div id="1front" class="front">1-front</div>
        <div id="1back" class="back">1-back</div>
    </div>
</div>

【讨论】：