CSS3D translationZ and translationY thinking error - html

Question

I am making a great thinking mistake here I think.
Please check out this fiddle: http://jsfiddle.net/kimgysen/zdP8q/
I want to understand how to build a spinning cube myself in 3D instead of just copying it, so I'm experimenting; but at the first stage I already get stuck.
First the code:
<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 );
}
What I wonder about is this line:
-webkit-transform: rotateX( 90deg ) translateZ( 100px );
Now this is going to be a very stupid question for you, but still:
Why is it that translateZ moves the figure upwards across the Y-axis?
When changing translateZ into translateY, it is moved across the Z-axis :-s
-webkit-transform: rotateX( 90deg ) translateY( 100px );
Since primary school I thought that: X-axis = horizontal, Y-axis = vertical and Z-axis is the axis that is pendicular on both (ie. pointing towards you).
Can someone please explain to me what's happening? I feel very stupid at this point =s

Answer 1

Yes, the axis work as you say.
But, when you do a rotation, you are not rotaing the object; you are rotating the object space.
So, after a X axis rotation, the z axis can become the y axis. (at 90 deg), can become the z axis inverted (at 180 deg), can become the y axis inverted (at 270 deg), and can revert to z axis at 360 deg.
And, of course, in between it is not aligned with any axis and the movement goes thru a diagonal axis.

Answer 2

Looks like you need a logical starting point to get this sorted out in your head.
Set all your cube sides/panels to position:absolute; and transform-origin: center;
Now we know all our panels will move relative to the same spot, the center of the panel.
So, we make this 3D now by pushing these panels away from it's default Z orientation.
In order to make a cube, we need to translate these panels away from their default Z orientation of 0 (which we need to preserve in order to have a nice anchor to spin on when we animate) by HALF of the width of the panels because... well, geometry.
Now all we need to do is spin these things around the axis with rotateY and rotateX (90deg, 180deg, -90deg) etc.
Then just take the whole thing and animate a spin on it.