■ CSS 변환 속성(transform)을 사용하는 방법을 보여준다.
▶ 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 44 45 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #image1 { position : absolute; left : 30px; top : 30px; transform : translate(200px, 100px); -webkit-transform : translate(200px, 100px); -moz-transform : translate(200px, 100px); -o-transform : translate(200px, 100px); opacity : 0.5; } #image2 { transform : rotate(30deg) scale(0.5, 0.5); -webkit-transform : rotate(30deg) scale(0.5, 0.5); -moz-transform : rotate(30deg) scale(0.5, 0.5); -o-transform : rotate(30deg) scale(0.5, 0.5); } #image3 { transform : skew(10deg, 10deg); -webkit-transform : skew(10deg, 10deg); -moz-transform : skew(10deg, 10deg); -o-transform : skew(10deg, 10deg); } </style> </head> <body> <header> <h1>CSS3 변환 속성</h1> </header> <div> <img id="image1" src="apple.jpg" /> <img id="image2" src="rocks.jpg" /> <img id="image3" src="sunset.jpg" /> </div> </body> </html> |
apple.jpg
rocks.jpg
sunset.jpg