我正在尝试旋转一个多维数据集，更具体地来说是一个立方体：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)
}
知道如何执行此操作吗？谢谢！
答案 0 :(得分：1)
我相信你的例子中x翻译相互抵消（你告诉立方体移动到右边20px和左边20px）。
为了实现你想要的目标（在旋转的前半部分向右滑动，在下半部分向左滑动），我会将立方体放在带有两个平移动画的包装div中，第二个延迟（有关如何延迟转换的说明，请参阅here。这两个动画都应该是立方体旋转持续时间的一半。
希望这有帮助！