코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS3 2D Transform</title> <style> div { height: 150px; width: 200px; position: absolute; margin: 30px } #origin { border: 3px solid black; } #skew_y { background-color: #87CEFA; border: 3px solid red; -webkit-transform: skewY(20deg); -ms-transform: skewY(20deg); transform: skewY(20deg); } </style> </head> <body> <h1>skewY() 메소드를 이용한 요소 기울이기</h1> <div id="origin">이 요소의 원래 모양입니다.</div> <div id="skew_y">이 요소는 원래 모양에서 y축을 따라 20도만큼 기울어졌습니다.</div> </body> </html>