Perspective required for proper rotating animation

Question

I was having an issue where I was attempting to rotate two halves of an image in opposite directions around the y-axis with these two animations:

@-webkit-keyframes first{
    0%   { -webkit-transform: rotateY(0); }
  100% { -webkit-transform: rotateY(-90deg); }
}

@-webkit-keyframes second{
    0%   { -webkit-transform: rotateY(0);}
  100% { -webkit-transform: rotateY(90deg); }
}

Despite the different values for the last keyframe, the two animations rotated in the same direction. Someone rightly pointed out that I needed to apply perspective to my containing space in order to make the effect function (note the checkbox that will apply and remove the perspective from the 3d space to demonstrate):

http://jsfiddle.net/eveQt/12/ - Chrome only

I am curious why this is. From MDN:

The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

From my understanding, perspective moves the viewer along the z plane, making the 3d effect more or less intense. What I don't understand is how moving along the z plane would affect the direction of rotation of an element in such a fashion. I would have thought that perspective would only affect how dramatic the effect is, and not the direction in which the element rotates.

Obviously, application of perspective is a required for the proper rotation direction of each half of the image in my example, but why?

Answer 1

Both halves are rotating correctly around the Y axis, in opposite directions. The trouble is, without perspective, they do not look like they are rotating differently.

Applying perspective in this case basically makes one side of the image larger than the other side, as it rotates around the Y-axis. If there is no perspective, both sides of the image remain the same size, regardless of the direction the image is spinning.

Have a look at the whole image rotating without perspective, and imagine it is rotating in one direction. Then close your eyes, and when you open them again, imagine it is rotating in the other direction. Magic!