在rotateY过渡时错位原点

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