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

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