CSS3D переводZ и переводY считая ошибка

Question

Здесь я думаю.
Пожалуйста, проверьте эту скрипку: http://jsfiddle.net/kimgysen/zdP8q/

Я хочу, чтобы понять, как построить вращающийся куб себя в 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 в translateY, он перемещается по оси Z.: -s

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

С начальной школы я подумал, что: ось Х = горизонтальная, Y-ось = вертикальной и Z-ось представляет собой ось, которая является перпендикулярной для обоих (то есть направлена ​​к вам).

Может кто-нибудь, пожалуйста, объясните мне, что происходит? Я чувствую себя очень глупо в этой точке = s

Answer 1

Да, ось работает, как вы говорите.

Но, когда вы делаете поворот, вы не вращаете объект; вы вращаете пространство объектов.

Таким образом, после поворота оси X ось z может стать осью y. (при 90 °), может стать инвертированной осью z (при 180 °), может стать инвертированной осью y (при 270 °) и может вернуться к оси z на 360 °.

И, конечно, между ними не выровнено ни с какой осью, и движение проходит по диагональной оси.

Answer 2

Похоже, вам нужна логическая отправная точка, чтобы получить это в голове.

Установите все боковые панели/панели кубика в положение: абсолютное; и transform-origin: center;

Теперь мы знаем, что все наши панели будут перемещаться относительно того же пятна, центра панели.

Итак, теперь мы делаем этот 3D, отталкивая эти панели от ориентации по умолчанию Z по умолчанию.
Чтобы сделать куб, нам нужно перевести эти панели в сторону от их Z-ориентации по умолчанию 0 (которую мы должны сохранить, чтобы иметь хороший якорь для вращения при анимации) с помощью HALF ширины панелей, потому что ... ну, геометрия.

Теперь все, что нам нужно сделать, это спина эти вещи вокруг оси с rotateY и rotateX (90deg, 180deg, -90deg) и т.д.

Тогда просто взять все это и живой спина на нем.