3D立方体脸部旋转变换原点错位

我有这个3D立方体： http://codepen.io/caemostajo/pen/yORNvx/ ，当点击第二个按钮时，前面和左边的脸部打开。3D立方体脸部旋转变换原点错位

正如你所看到的左脸是错位的，我不能把它放在它所属的位置上，以保持它的打开动画。它应该看起来像这样：http://www.f-lohmueller.de/pov_tut/backgrnd/im/CubeMappingWrapping_1d_64.gif

我一直在尝试不同的translate3D和转换原始值，但没有运气，认为问题是与单击按钮时该面的转换原点。

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

来源

2016-04-28 Cae Mostajo

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

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

来源

2016-04-28 01:35:19 Sumac

感谢您的回应！它确实找到了它的位置，但是一旦您点击动画并打开面，旋转就会改变。它应该打开这样的面孔：http://www.f-lohmueller.de/pov_tut/backgrnd/im/CubeMappingWrapping_1d_64.gif –

我正在努力与这一个努力，我一直在改变translate3D和转换 - 起源价值很多次，以使它没有运气的工作......我相信这并不困难。 3d转换大师！我需要你们！ = d –

这将关闭立方体。

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

设置动画的其他方式做

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

来源

2016-04-28 04:32:25

我已经改变了：

.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

来源

2016-04-28 17:02:07 vals

3D立方体脸部旋转变换原点错位

回答

相关问题