What is happening

Let's try this: Imagine that you are holding 2 pictures in one of your hands in front of you, with both pictures facing you (you'll only be able to see the one in front). For this mental exercise, we'll assume the pictures are 6 inches wide.

Now, take the picture that is the "back" picture and put it in your left hand, and put the "front" picture in your right hand. Bring your right hand towards you 3 inches and move your left hand away from you 3 inches. This represents the translateZ() on the .front and .back classes.

Now, hold the picture in your left hand by the middle of the left edge of the picture. This represents the transform-origin: center left.

(This next part would be very difficult to do physically, but try to imagine it anyway.) While holding the left edge of that card, (making sure you keep that point in the same place) rotate the photo away from you. Keep rotating it until the right edge of the photo touches the left edge of the front photo, and the picture is facing to your left. This is the rotate(270deg). Now, in your hands, you have half of a box, with one side being a photo that you can see, and one side has a photo facing to your left.

Now, when you do the hover, the photos will rotate -270deg, so you are going to have the one that is currently facing to your left facing you, and the one that is currently facing you will be facing to your right. (Keep in mind that -270deg is the same as 90deg).

Hopefully this helps you get a better mental picture of what is happening.