CSS animation rotating in unexpected way


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):


Problem courtesy of: Mister Epic


They are going in opposite directions

add perspective to see it better

.space {
    -webkit-perspective: 1000px;


Solution courtesy of: vals


Use this as CSS to see the difference:

    -webkit-animation: first 5s infinite;

    -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.