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