Question

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

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

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

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

Answer 1

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

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

Answer 2

这将关闭多维数据集。

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

以另一种方式制作动画

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

Answer 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

三维立方体面旋转变换起源错位

3 个答案: