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           


        

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

You can use several transform functions in the transform property by separating them with a space:

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