CSS animation rotating in unexpected way

Problem

I feel like my junior high math is failing me.

I want to rotate two divs around the Y axis in different directions. I have created 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); }
}

There has been some confusion about my original fiddle, so I've updated it with an image. Each of the two div's will display half the image. My thought is that each half of the image would rotate in opposite directions around the y-axis until they both disappear. That does not appear to be happening, they appear to be rotating together.

Here's the fiddle (Chrome only):

http://jsfiddle.net/eveQt/7/

Problem courtesy of: Mister Epic

Solution

They are going in opposite directions

add perspective to see it better

.space {
    -webkit-perspective: 1000px;
}

fiddle

Solution courtesy of: vals

Discussion

Use this as CSS to see the difference:

.first{
    -webkit-animation: first 5s infinite;
}

.second{
    -webkit-animation: second 5s infinite;
}

@-webkit-keyframes first{
    0%   { -webkit-transform: rotate3d(0.1,0.5,0.1,0deg); }
  50% { -webkit-transform: rotate3d(0.1,0.5,0.1,-90deg); }
  100% { -webkit-transform: rotate3d(0.1,0.5,0.1,-180deg); }
}

@-webkit-keyframes second{
    0%   { -webkit-transform: rotate3d(0.1,0.5,0.1,0deg); }
  50% { -webkit-transform: rotate3d(0.1,0.5,0.1,90deg); }
  100% { -webkit-transform: rotate3d(0.1,0.5,0.1,180deg); }
}
Discussion courtesy of: skrtbhtngr

I am pretty sure they are rotating in opposite directions. Anyways you will never be able to tell. It is an optical illusion

Discussion courtesy of: Charlie Liu

This recipe can be found in it's original form on Stack Over Flow.