6

ホバーしたときに回転アニメーションで画像を反転したい (以下のコードを参照)。画像にカーソルを合わせると、x 軸を中心に 1 秒間回転します (マウスが画像から離れると元に戻ります)。

アニメーションは、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 . 画像の下にある [Toggle Flip] ボタンが正常に機能するため、この問題はマウス操作に関連しているに違いありません。

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 に答える