CSS 애니메이션 : 스팬 회전

Question

저는이 스팬 회전 예제로 완전히 고생했습니다. http://jsfiddle.net/C94b8/1/. 내가하고 싶은 것은 val을 포함하는 스핀을 입력에서 회전시키는 것입니다. 그러나 나는 그것을 가능하게 할 수 없습니다. 또한 범위를 display: inline-block으로 변경해 보았습니다. 어느 쪽도 일하지 않았다.

Answer 1

다음은 잘못된 것입니다. rotate(1turn)과 같은 것은 없습니다. 회전은 각도로 정의됩니다. 0은 회전 없음이고 360은 완전한 회전입니다.

네, 디스플레이를 인라인 블록으로 설정해야합니다. 또한 Chrome은 접두사가없는 변환을 아직 지원하지 않습니다. 대신 -webkit-transform을 사용해야합니다. Firefox는 모든 것을 지원하므로 걱정할 필요가 없습니다.

또한 0% 및 100%을 사용할 필요가 없습니다. 그게 전부라면 from과 to을 사용할 수 있습니다.

한 가지 더 : 나는 rotate을 지원하지 않는 IE라고 생각합니다. 그들은 rotateZ을 원합니다. 그래서 나는 그것을 바꿨다.

완제품?

@-webkit-keyframes spin { 
    from {-webkit-transform: rotateZ(0deg);} 
    to {-webkit-transform: rotateZ(360deg);} 
} 

@keyframes spin { 
    from {transform: rotateZ(0deg);} 
    to {transform: rotateZ(360deg);} 
} 

header span {   
    display: inline-block; 
    /* All the rest of header span {} code goes here. I didn't copy it all. */ 
}