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