코드:
결과보기 »
<!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; } #rotate { background-color: #87CEFA; border: 3px solid red; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } </style> </head> <body> <h1>rotate() 메소드를 이용한 요소의 회전</h1> <div id="origin">이 요소의 원래 모양입니다.</div> <div id="rotate">이 요소는 원래 모양에서 시계방향으로 30도만큼 회전하였습니다.</div> </body> </html>