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/