CSS3 多重变换 [英] CSS3 Multiple transforms

问题描述

我有一个 css3 动画，我使用下面的代码在 X 轴上旋转一个立方体.

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

添加 x 和 y 旋转的代码不起作用，我需要将它们组合起来.这可能吗.这是我第一次使用 css3.任何帮助，将不胜感激.

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.

推荐答案

您可以在 transform 属性中使用多个转换函数，用空格分隔它们:

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

这篇关于CSS3 多重变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！