在旋转转场上放错原点

Question

我想在转换(-180度)动画期间保持div.box的左边缘在同一位置。我不明白它为什么会动。这是代码:

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

这里是一个实例http://dabblet.com/gist/5551520

Answer 1

您也在转换transform-origin，正如您使用transition: all一样，并且它在悬停状态中指定。初始值要居中。

如果你把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