css - 3D CSS変換-transform：rotateX（180deg）;

Question

x軸に沿って画像を上下逆さま（180度）に反転させて、ホバー時に画像をアニメーション化しようとしています。

ここのように

なんらかの理由で動作させられない場合を除きます。

img {
    transition:all 2s ease-in-out;
    perspective: 800px;
    perspective-origin: 50% 100px;
}

img:hover {
    transform:rotateX(180deg);
}

Answer 1

このページによると、Chrome にはまだ-webkitプレフィックスが必要です。

ブラウザのプレフィックスがありません。

img {
    -webkit-transition:all 2s ease-in-out;
    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 100px;
}

img:hover {
    -webkit-transform:rotateX(180deg);
}

これは、それぞれのブラウザーの他のブラウザー プレフィックスを追加する必要があることも意味します。ブラウザのプレフィックスをいじりたくない場合は、Lea Verou による prefixfree.js というプラグインを使用して、すべてを処理できます。