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立方體臉部旋轉變換原點錯位

回答

相關問題