0

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

結果はここにあります。

さらに追加しても、要素に適用される変換は 1 つだけです。

4

2 に答える 2

5

このようなものを書く場合：

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

次に、2番目のものが最初のものをオーバーライドし、要素はスケーリングされるだけで、回転されません。

複数の変換を単一の要素に適用するには、それらをチェーンする必要があります。

例：

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

また、それらを適用する順序は重要であり、選択した順序に応じて異なる結果が得られる可能性があります-この例を参照してください。同じ2つの変換を適用した後、青いボックスは赤いボックスと同じ形状ではありませんが、逆順。

連鎖変換を使用したフィドル：http：//jsfiddle.net/TBrf2/4/

于 2012-09-28T11:51:07.917 に答える
2

これは、複数の変換を使用するフィドルのデモです。

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

このように申請する必要があります。

于 2012-09-28T11:56:00.760 に答える