如何使用关键帧动画应用CSS3变换？

这里是我的HTML代码：

<div class="container"> 
<div class="cell"><span class="inner"></span><span class="inner"></span></div> 
<div class="cell"><span class="inner"></span><span class="inner"></span></div> 
<div class="cell"><span class="inner"></span><span class="inner"></span></div> 
<div class="cell"><span class="inner"></span><span class="inner"></span></div> 
<div class="cell"><span class="inner"></span><span class="inner"></span></div> 
</div>

而且我尝试：

@-webkit-keyframes firstanim{ 
    from{ 
     -webkit-transform:scale(1); 
     -webkit-transform:rotate(0deg); 
    backgroud:skyblue; 
    left:0px; 

    -webkit-transform: rotateY(0deg); 
    } to{ 
    -webkit-transform:rotate(360deg); 
    -webkit-transform:scale(1.5); 
    background:orange; 
    left:100px; 
    -webkit-transform: rotateY(360deg); 
    } 
} 


.container{ 
    border:1px solid black; 
    padding:20px; 
    width:250px; 
    height:50px; 
    position:realtive; 
} 
.cell{ 
    width:25px; 
    height:25px; 

    background:skyblue; 

    float:left; 
    display:inline-block; 
    margin:0px 5px; 
    position:relative; 
    -webkit-animation: firstanim 3s infinite; 

} 
.inner{ 
width:100%; 
height:50%; 
float:left; 

    border:1px solid white; 
    border-left-width:0px; 
    borer-right-width:0px; 
}

结果位于here。

即使添加更多元素，也只有一个变换应用于元素。

来源

2012-09-28 ramesh babu

这里是fiddle demo与多个转换工作。

-webkit-transform:scale(1) rotateY(0deg);

你需要申请这样的。

来源

2012-09-28 11:56:00

请不要发布与其他答案相同的答案，尤其是如果其他答案更详细。它不会增加任何贡献。 – Chris

对不起！我没有看到由于上调小提琴的答案 –

如果你写的东西是这样的：

transform: rotate(30deg); 
transform: scale(3);

然后第二个覆盖的第一个和你的元素只缩放，不旋转。

为了将多个转换应用于单个元素，您需要链接它们。

例子：

transform: rotate(30deg) scale(3) translateX(3em) skewY(60deg);

此外，在你运用这些重要，并根据所选择的顺序你可能会得到不同的结果的顺序 - 见this example，其中蓝色框不相同在应用相同的两个变换之后形成红色形状，但是以相反的顺序。

你拨弄链接转换：http://jsfiddle.net/TBrf2/4/

来源

2012-09-28 11:51:07 Ana

打了我几秒钟...... :) – fcalderan

如何使用关键帧动画应用CSS3变换？

回答

相关问题