我想将鼠标悬停在图像上时使用旋转动画翻转图像(请参阅下面的代码)。当鼠标悬停在图像上时,它会绕 x 轴旋转一秒钟(当鼠标离开图像时返回)。
动画在 Firefox 和 Safari 中按预期工作。然而,Chrome有时会跳过动画并立即翻转图像。我不知道如何可靠地重现该问题,因为它通常会在跳过动画之前运行几次。我录制了一个视频,所以你可以明白我的意思:https://www.youtube.com/watch?v=bpgi46F_5RU https://www.youtube.com/watch?v=bpgi46F_5RU
这个CSS有问题吗?我首先怀疑这是由旋转角度引起的,但即使使用其他类型的动画也会出现同样的问题。
.flippable-container {
float: left;
perspective: 1000px;
}
.flippable {
transition: transform 1s;
}
.flippable-container:hover .flippable {
transform: rotateX(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="flippable-container">
<img class="flippable" src="http://lorempixel.com/200/200/food"/>
</div>
Edit:正如 TylerH 所评论的,这看起来像是 Chrome 中的一个错误。我在 David Walsh 的这个著名教程中看到了同样的问题:http://davidwalsh.name/css-flip http://davidwalsh.name/css-flip。视频:https://www.youtube.com/watch?v=o_TViH4AmZ8 https://www.youtube.com/watch?v=o_TViH4AmZ8。该问题肯定与鼠标交互有关,因为图像下方的“切换翻转”按钮工作正常。
我通过在所有可翻转项目上放置 z 索引和位置:相对来解决此问题。我不知道为什么这会影响它,但它似乎已经完成了工作。
例子:http://jsfiddle.net/L0duLu3c/2/ http://jsfiddle.net/L0duLu3c/2/
.flippable-container {
float: left;
perspective: 1000px;
}
.flippable {
transition: 0.6s;
z-index:10;
position:relative;
transform: rotateX(0deg);
}
.flippable-container:hover .flippable {
transform: rotateX(180deg);
z-index:20;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)