How to figure out how much you need to translate and the axis you should translate on?

It helped me to visualize it in 3D rather than trying to imagine it when wrapping thought around 3D space. How you do it is really a matter of personal preference and experience. I had some experience in 3D modeling before I started with web development, so when I started off it was a bit easier for me to toss panels around (either physically or in a program that handles 3D stuff regularly) and see how they interacted with each other, what directions they needed to move, where they would rotate from, and so on.

I actually have a homemade set of small panels that are tucked away in a drawer with a rubber band around them. They're about the size of index cards, colored two-tone (front/back) and labeled appropriately (top, left, right, etc.), each with a series of notches around the edge so they can interlock. When I started web development, those went miles in allowing me to see what was happening if I rotated from a specific spot and which direction to transform. I can't voice enough how being able to hold a side or corner in my hand physically and rotate around that point helped me grasp 3d transforms on a web page.

The easy part is overthinking it or trying to convince yourself there's only one "right" way to do something. The slightly more difficult part is remembering that you can actually choose many combinations of transform, rotate, and transform-origin values and achieve the same results he does in this video (or in any coding challenge). Sure, some may be a bit more efficient for some things and some might be easier to implement or require more steps but, if it works in the end, it's really about what feels good to you.

As to the 110px, Guil does explain that in the video, it is half of the 220px width which we set on ".photo-cube" Why? Well, your cube will end up being 220px on each side, and when you start, everything is in the center of the cube, so each side of the cube needs to be moved out by 110px, in an appropriate direction.

Another thing to be aware of, the order of the transforms does matter, I was trying to do one on my own, and found that reversing the order changed the position greatly.

Take note of each of the transform-origin directives, they tell you where the pivot point is for the rotate* function. When considering those, you get the following from the list of positioning directives :

• .front, is simply brought towards the viewer 110px
• .back ( which is really the left side of the cube as you are facing the front ) is pushed back 110px, then rotated around using the left edge as the pivot point, so that its image is now facing towards your left
• .left ( which is really on the right side as we face the cube ) is first rotated around using its right edge as the pivot point, so that the image is now facing right, then slid to the right by 110px
• .right ( which is really the side of the cube facing away from us, I would call it the back ) is first pushed back 110px, and then flipped along its center to leave it facing away from us.

I hope this will clear up the confusion for some of us.