rotateY轉換時錯位的原點

Question

我想在transformY（-180deg）動畫期間將div.box的左邊緣保留在同一位置。我不明白爲什麼它會移動。這是代碼：

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

這裏是活生生的例子http://dabblet.com/gist/5551520

Answer 1

你也轉變了變換原點，當你使用過渡：所有的，它是在懸停狀態中指定。初始值是居中。

如果您將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