■ CSS 이행(transition) 속성을 사용하는 방법을 보여준다.
▶ test.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #image1 { -webkit-transition : all 1s ease; -o-transition : all 1s ease; } #image1:hover { transform : rotate(30deg); -webkit-transform : rotate(30deg); -moz-transform : rotate(30deg); -o-transform : rotate(30deg); } #image2 { width : 120px; height : 200px; -webkit-transition : all 1s linear; -o-transition : all 1s linear; } #image2:hover { width : 240px; height : 400px; } </style> </head> <body> <header> <h1>CSS3 이행 속성</h1> </header> <div> <img id="image1" src="apple.jpg" /> <img id="image2" src="rocks.jpg" /> </div> </body> </html> |
