CSS3D translationZ and translationY thinking error

我在這裏犯了一個很大的思考錯誤。
請看看這個小提琴：http://jsfiddle.net/kimgysen/zdP8q/CSS3D translationZ and translationY thinking error

我想了解如何建立一個旋轉的立方體自己在3D，而不是僅僅將其複製，所以我嘗試;但在第一階段我已經陷入困境。
首先代碼：

<section class="container"> 
     <div id="cube"> 
     <figure class="front">1</figure> 
     <figure class="back">2</figure> 
     <!-- 
     <figure class="right">3</figure> 
     <figure class="left">4</figure> 
     <figure class="top">5</figure> 
     <figure class="bottom">6</figure>--> 
     </div> 

.container { 
    width: 200px; 
    height: 200px; 
    position: relative; 
    margin: 0 auto 40px; 
    border: 1px solid #CCC; 
    -webkit-perspective: 1000px; 
      perspective: 1000px; 
} 

#cube { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transform-style: preserve-3d; 
      transform-style: preserve-3d; 
    -webkit-transition: -webkit-transform 1s; 
      transition: transform 1s; 
    -webkit-transform: rotateX(-20deg) rotateY(20deg); 
      transform: rotateX(-20deg) rotateY(20deg); 
} 

#cube figure { 
    margin: 0px; 
    display: block; 
    position: absolute; 
    width: 196px; 
    height: 196px; 
    border: 2px solid black; 
    line-height: 196px; 
    font-size: 120px; 
    font-weight: bold; 
    color: white; 
    text-align: center; 
} 

#cube.panels-backface-invisible figure { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
     -o-backface-visibility: hidden; 
      backface-visibility: hidden; 
} 

#cube .front { background: hsla( 0, 100%, 50%, 0.7); } 
#cube .back { background: hsla( 60, 100%, 50%, 0.7); } 

#cube .front { 
    -webkit-transform: translateZ(100px); 
      transform: translateZ(100px); 
} 
#cube .back { 
    -webkit-transform: rotateX(90deg) translateZ(100px); 
      transform: rotateX(90deg) translateZ(100px); 
}

讓我感到奇怪的是這條線：

-webkit-transform: rotateX(90deg) translateZ(100px);

現在，這將是一個非常愚蠢的問題要問你，但還是：

爲什麼translateZ是否將圖形向Y軸上方移動？
當改變translateZ成平移Y，它跨過Z軸移動：-s

-webkit-transform: rotateX(90deg) translateY(100px);

由於小學我認爲：X軸=水平，Y軸=垂直和Z軸是兩個軸垂直（即指向你）。

有人可以請向我解釋發生了什麼？我覺得在這一點上很愚蠢= s

來源

2013-09-27 Trace

是的，軸的工作就像你說的那樣。

但是，當你做一個旋轉，你不旋轉的對象;你正在旋轉物體空間。

所以，在X軸旋轉後，z軸可以變成y軸。（在90度），可以變成倒置的Z軸（180度），可以變成倒置的Y軸（270度），並且可以在360度時恢復到z軸。

而且，當然，它們之間並不與任何軸對齊，並且運動通過對角軸。

來源

2013-09-27 17:38:37 vals

「物體空間」是什麼意思？你能否更直觀地說明這一點？ – Trace

沒關係，我明白了。 – Trace

看起來你需要一個合乎邏輯的起點，以便在你的腦海中把它整理出來。

將所有立方體邊/面板設置爲：absolute;和transform-origin：center;

現在我們知道我們所有的面板都會相對於面板中心相同的位置移動。

因此，我們現在通過將這些面板從默認的Z方向推開來製作3D。
爲了製作一個立方體，我們需要將這些面板從它們的默認Z方向0（我們需要保留以便在動畫製作時有一個漂亮的錨點旋轉）通過HALF的寬度因爲...好吧，幾何。

現在我們需要做的就是不停地旋轉與旋轉Y和rotateX軸（90度，180deg，-90deg）等，這些東西

然後，只需把整個事情，它動畫旋轉。

來源

2013-09-27 17:59:00

CSS3D translationZ and translationY thinking error

回答

相關問題