CSS3多重变换

我有一个css3动画，即时使用下面的代码在X轴上旋转一个立方体。CSS3多重变换

@-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。任何帮助，将不胜感激。

来源

2012-01-11 Charl

-3

我没有测试过这一点，但对于

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

来源

2012-01-11 13:28:37 Connum

感谢您的回复CONNUM。我刚刚测试过这个，它似乎不起作用。它只是进行第一次转换而忽略第二次转换。 – Charl 2012-01-11 13:40:21

此页面帮助您吗？ http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/ 据我所知，你可以定义两个动画，然后通过'-webkit-animation：'应用它们的逗号分隔。 – Connum 2012-01-11 13:48:19

我走了虽然这个网页，我不能从中了解多少意义，从我的理解，我需要结合*多*变换和动画，但我不知道。这是我第一次使用CSS3。 – Charl 2012-01-11 14:06:14

这应该工作：

.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/

来源

2012-01-11 14:04:18 easwee

它似乎没有工作。 – Charl 2012-01-11 14:42:25

@Charl - 你在看什么浏览器？适用于Chrome和Safari。 – easwee 2012-01-11 14:53:45

即时通讯使用Chrome，下面是一个链接到立方体，其旋转的时刻，但它并不意味着。用你提供的代码看起来似乎不起作用，但起点和终点似乎没有匹配，所以没有显示无缝循环。您的代码： http://phoenixdigital.co.za/test/cube/imagecube/new/ 旧代码（不是为了工作，有语法错误） http://phoenixdigital.co.za/测试/立方体/ imagecube/ – Charl 2012-01-12 07:30:28

CSS3多重变换

回答

相关问题