CSS animation rotating in unexpected way

Question

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/

Answer 1

They are going in opposite directions

add perspective to see it better

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

fiddle

Answer 2

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); }
}

Answer 3

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