CSS3 Несколько преобразований

Question

У меня есть анимация css3, я использую приведенный ниже код для вращения куба по оси X.

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

Мне нужно выполнить код ниже одновременно с кодом выше, чтобы куб мог вращаться на обеих осях одновременно.

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

Добавление кода для вращения по осям X и Y не работает, мне нужно объединить их. Это возможно. Я впервые работаю с css3. Любая помощь будет оценена.

Answer 1

Это должно работать:

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

Пример: http://jsfiddle.net/KRYRk/1/

Answer 2

Я не проверял это, но как насчет

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