CSS3 변환을 키 프레임 애니메이션과 함께 적용하는 방법은 무엇입니까?

Question

CSS3 애니메이션과 함께 하나 이상의 변환을 적용하는 방법은 무엇입니까?

<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에 위치해 있습니다

여기 내 HTML 코드입니다.

추가 할 경우에도 하나의 변환 만 요소에 적용됩니다.

Answer 1

여기에 여러 변환 작업 fiddle demo입니다.

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

이렇게 적용해야합니다.

Answer 2

은 다음처럼 작성할 경우

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

두 번째는 첫 번째을 무시하고 요소 만 회전하지 조정됩니다 다음 .

단일 요소에 여러 변형을 적용하려면 해당 요소를 체인으로 묶어야합니다.

예 :

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

또한

, 당신이 그 (것)들을 중요한 당신이 선택한 순서에 따라 다른 결과를 얻을 수 있습니다 적용되는 순서 - 파란색 상자가 동일하지 않습니다 this example를 참조하십시오 같은 두 개의 변환을 적용한 후 빨간색으로 변환하지만 역순으로 정렬됩니다. 체인 변환에

귀하의 바이올린 : http://jsfiddle.net/TBrf2/4/