css - 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