css - 如何旋转和平移 css 3d 立方体？

Question

我正在尝试旋转一个立方体，更具体地说是来自这个 tut 的那个：http: //desandro.github.com/3dtransforms/examples/cube-02-show-sides.html 假设我想从第 1 面转到第 3 面. 现在，我想要实现的是不仅要旋转立方体，还要在 x 轴上平移（移动它）。例如，当旋转结束时，立方体将向右移动 20px（直到旋转的一半），然后向左移动 20px（回到原来的位置）。我尝试了以下方法，但我想它有问题（我在这里省略了 css 前缀）：

#cube.show-right {
    transform: translateX(20px) translateZ( -100px ) rotateY(  -90deg ) translateX(-20px)
}

知道如何执行此操作吗？谢谢！

Answer 1

我相信在您的示例中，x 平移正在相互抵消（您告诉立方体向右移动 20 像素，向左移动 20 像素）。

为了完成你想要的（在旋转的前半部分向右滑动，在后半部分向左滑动），我会将立方体放在一个带有两个平移动画的包装 div 中，第二个延迟（参见这里关于如何延迟转换的解释）。这两个动画都应该是立方体旋转持续时间的一半。

希望这可以帮助！