6

我想在悬停在图像上时翻转带有旋转动画的图像（请参见下面的代码）。将鼠标悬停在图像上时，它围绕其 x 轴旋转一秒钟（当鼠标离开图像时返回）。

该动画在 Firefox 和 Safari 中按预期工作。但是，Chrome 有时会跳过动画并立即翻转图像。我不知道如何可靠地重现该问题，因为它通常会在动画被跳过之前工作几次。我录制了一个视频，所以你可以明白我的意思：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>

编辑：正如 TylerH 所评论的，它看起来像 Chrome 中的一个错误。我在 David Walsh 的这个著名教程中看到了同样的问题：http: //davidwalsh.name/css-flip。视频：https ://www.youtube.com/watch?v=o_TViH4AmZ8 。该问题必须与鼠标交互有关，因为图像下方的“切换翻转”按钮可以正常工作。

4

1 回答 1

3

我已经通过在所有可翻转项目上放置 z-index 和 position:relative 来解决这个问题。我不知道为什么这会影响它，但它似乎已经完成了这项工作。

示例：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;
}
于 2015-08-14T07:28:47.550 回答