css - 回転 Y トランジションで原点の位置がずれている

Question

transformY(-180deg) アニメーションの間、同じ場所に div.box の左端を保持したいと思います。なぜ動いているのか理解できません。これはコードです：

transform-origin: 0% 0%;
transform: rotateY(-180deg);

そして、ここにライブの例があります http://dabblet.com/gist/5551520

Answer 1

transition: all を使用しているため、transform-origin も遷移しており、ホバー状態で指定されています。初期値は中央揃えです。

transform-origin: 0% 0%;装着すれば.box期待通りの効果を発揮します。

.box {
    /* removed additional styles */
    transition: all 600ms linear;
    transform-origin: 0% 0%;
}

body:hover .box {
    transform: rotateY(-180deg);
}

http://dabblet.com/gist/5551730