<!DOCTYPE html>
<html>
<head>
<title>x</title>
<style>
@keyframes bb{
0% {transform: rotate(0,-90deg);}
25% {transform: rotate(0,0deg);}
50%{ transform: rotate(0,90deg); }
75% {transform: rotate(0,0deg);}
100%{transform: rotate(0,-90deg);}
}
img{
animation-name: bb;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<h3>어지러워요</h3>
<hr>
<img src="media/1.png">
</body>
</html>
이렇게 했는데 안되더라구요.... 오케 해야되나영...ㅠ
우선, rotate()를 사용하는 문법이 틀렸어요. rotate()는 다음과 같이 회전시키고자 하는 각도 하나만 전달합니다.
rotate(0,90deg) -> rotate(90deg)
그리고 책의 246페이지의 그림 5-27을 참고하세요.
이 그림에는 각도가 의미하는 바가 나와 있습니다.
1초 동안에, 회전 각도를 0, 90, 180 순으로 바꾸고 다시 90, 0도 바꾸면 됩니다.