CSS3 Multiple transforms

Question

I have a css3 animation, im using the code below to rotate a cube on the X-axis.

@-webkit-keyframes spin2 {
from { -webkit-transform: rotateX(135deg); }
to   { -webkit-transform: rotateX(855deg); }
}

I need to do the code below at the same time as the code above so the cube can rotate on both axis simultaneously.

@-webkit-keyframes spin2 {
from { -webkit-transform: rotateY(135deg); }
to   { -webkit-transform: rotateY(855deg); }
}

Adding the code for the x and y rotation doesn't work, I need to combine these. Is this possible. This is my first time working with css3. Any help would be appreciated.

Answer 1

This should work:

    .yourElement {
        -webkit-animation:spin 4s infinite;
    }
    @-webkit-keyframes spin {
      from {
        -webkit-transform: rotateX(135deg) rotateY(135deg);
      }
      to {
        -webkit-transform: rotateX(855deg) rotateY(855deg);
      }
    }

Sample: http://jsfiddle.net/KRYRk/1/

Answer 2

I have not tested this, but what about

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotateX(135deg);
        -webkit-transform: rotateY(135deg);
    }
    to   {
        -webkit-transform: rotateX(855deg);
        -webkit-transform: rotateY(855deg);
    }
}