CSS3 多重变换答案

【问题标题】：CSS3 Multiple transformsCSS3 多重变换
【发布时间】：2012-01-11 12:44:14
【问题描述】：

我有一个 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。任何帮助，将不胜感激。

【问题讨论】：

标签： html css 3d

【解决方案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/

【讨论】：

@Charl - 您在哪个浏览器中查看它？在 Chrome 和 Safari 中为我工作。
我正在使用 Chrome，下面是立方体的链接，它目前正在旋转，但并不意味着要旋转。使用您提供的代码，它似乎不起作用，但起点和终点似乎永远不匹配，因此没有显示无缝循环。您的代码：phoenixdigital.co.za/test/cube/imagecube/new 旧代码（不能正常工作，有语法错误）phoenixdigital.co.za/test/cube/imagecube
@Charl - 我刚刚使用了您的学位设置 - 您必须对其进行编辑以适合您的需求 - 我提供的代码有效 - 使其顺利运行并按照您的意愿工作，这取决于您。做你的数学 - 我在 jsfiddle 上为你提供了代码示例 - 在那里玩。
请记住，Android 不支持同时进行多个变换，使用 rotate3d 可以将这些组合成一个变换命令。仅供参考，并不是说您需要知道，但很高兴知道。 :)

【解决方案2】：

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

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

【讨论】：

感谢康纳姆的回复。我刚刚对此进行了测试，但它似乎不起作用。它只进行第一次转换并忽略第二次。
此页面对您有帮助吗？ css-tricks.com/snippets/css/webkit-keyframe-animation-syntax 据我了解，您可以定义两个动画，然后通过 -webkit-animation: 以逗号分隔应用它们。
我已经浏览了这个页面，但我无法理解它，据我所知，我需要组合多个变换和动画，但我不确定。这是我第一次使用 CSS3。