Quoting you:
"...#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }
Note here that the translateZ function comes after the rotate. The order of transform functions is important. Take a moment and soak this in. Each face is first rotated towards its position, then translated outward in a separate vector."
Does this need correction? Isn't the transform order right to left? I think in this case translateZ is what will happen first and then the rotateZ tranform will be applied on the face which was just translated in Z.
Quoting you: "...#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); } Note here that the translateZ function comes after the rotate. The order of transform functions is important. Take a moment and soak this in. Each face is first rotated towards its position, then translated outward in a separate vector." Does this need correction? Isn't the transform order right to left? I think in this case translateZ is what will happen first and then the rotateZ tranform will be applied on the face which was just translated in Z.