[CSS] 이미지 회전 및 회전 반복하기

CSS 로 img 태그를 회전시키면서, 같은 작업을 반복하는 기능을 구현해봤습니다.

인터넷익스플로러 10부터 동작합니다.

CSS를 풀어서 설명드리자면

img 테그에 hand 클래스에 대해서

에니메이션 총 동작시간은 2초

에니메이션 반복횟수 무제한

회전시 중심점은 이미지의 X축 왼쪽으로부터 25%위치와 Y축 위에서부터 100%위치 (바닥)

에니메이션 시작한지 0%지점에서 -10도, 50% 지점에서 25도, 다시 100%지점에서는 -10로 원상복귀

이를 무한반복 하면 손 이미지일 경우 안녕 ~ 하면서 흔드는 모습이에요

<html>

<head>

<style>

img.hand {

animation: target_image 2s;

animation-iteration-count: infinite;

transform-origin: 25% 100%;

}

@keyframes target_image {

0% { transform: rotate(-10deg); }

50% { transform: rotate(25deg) }

100% { transform: rotate(-10deg); }

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

:)