[CSS3] transform:rotate를 이용한 이미지 회전
이번 시간은 주사위에 마우스를 갖다 놓으면 주사위가 일정한 시간에 걸쳐 45도,130도 회전하는 것을 실습해 보도록 하겠습니다.
[관련 동영상]
[소스 코드]
|
|
<!doctype html> <html> <head> <meta charset="UTF-8"> <style> img { width : 100px; height : 100px; transition : transform 1s } img:hover { transform:rotate(45deg); } </style> </head> <body> <img id="dice" src="dice.png"> </body> </html> |
(가) 이미지 요소에 넓이와 높이 설정, 전환 효과 설정
|
|
img { width : 100px; height : 100px; transition : transform 1s // 0에서 130도까지 1초간 변경 } |
(나) 이미지 요소에 넓이와 높이 설정, 전환 효과 설정
|
|
img:hover { transform:rotate(130deg); // 130도 회전 } |
(다) 이미지 삽입
|
|
<img id="dice" src="dice.png"> |
src부분에는 해당하는 이미지 파일이나 이미지가 있는 위치를 넣어주면 된다.