이번 시간은 주사위에 마우스를 갖다 놓으면 주사위가 일정한 시간에 걸쳐 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부분에는 해당하는 이미지 파일이나 이미지가 있는 위치를 넣어주면 된다.
'프로그래밍 > 신나는 웹프로그래밍' 카테고리의 다른 글
| [CSS3] 이미지 3초간 변경하기(확대)- transition (0) | 2016.01.18 |
|---|
