3d 立方体面旋转变换原点错位答案

【问题标题】：3d cube face rotation transform-origin misplaced3d 立方体面旋转变换原点错位
【发布时间】：2016-04-28 00:06:46
【问题描述】：

我有这个 3d 立方体： http://codepen.io/caemostajo/pen/yORNvx/ ，单击第二个按钮时，正面和左侧面打开。

你可以看到左脸放错了位置，我不能把它放在它所属的地方，以维持它的开放动画。它应该是这样的：http://www.f-lohmueller.de/pov_tut/backgrnd/im/CubeMappingWrapping_1d_64.gif

我一直在尝试使用不同的 translate3D 和 transform-origin 值，但没有运气，认为问题出在单击按钮时该面的 transform-origin。

我希望有人可以帮助...最好的！

【问题讨论】：

标签： css 3d css-transforms cube translate3d

【解决方案1】：

要将左侧面放在右侧位置，请尝试在 .left-flip 选择器中将 x 轴更改为 -100%。

translate3d(-100%, 0, $cubeHeight / 2);

【讨论】：

感谢您的回复！它确实将面定位在其位置，但是一旦您单击动画并打开面，旋转就会改变。它应该像这样打开面：f-lohmueller.de/pov_tut/backgrnd/im/…
我一直在努力解决这个问题，我已经多次更改 translate3D 和 transform-origin 值以使其无法正常工作......而且我确信它没那么难。 3d 改变大师！我需要你们！ =D

【解决方案2】：

这将关闭立方体。

._3dface--left{ 
  transform: rotateY(-270deg) translate3d(0%, 0, 75px);
}

以另一种方式制作动画

._3dface--left{ 
  transform: rotateY(90deg) translate3d(0%, 0, 75px);
}

【讨论】：

【解决方案3】：

我变了：

.left-flip {
    transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
        transform-origin: (0px) (0px) (-$cubeHeight / 2);
        transform: rotateY(-90deg) translate3d(0%, 0, -$cubeHeight / 2);
}

和

#radio-rotate:checked ~ .space3d .left-flip {
    transform: rotateY(-180deg) translate3d(0, 0, -$cubeHeight / 2);
}

结果是this

【讨论】：