코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS3 2D Transform</title> <style> div { height: 150px; width: 200px; position: absolute; } #origin { border: 3px solid black; } #trans { background-color: #87CEFA; border: 3px solid red; -webkit-transform: translate(100px, 50px); -ms-transform: translate(100px, 50px); transform: translate(100px, 50px); } </style> </head> <body> <h1>translate() 메소드를 이용한 요소의 이동</h1> <div id="origin">이 요소의 원래 위치입니다.</div> <div id="trans">이 요소는 원래 위치에서 x축의 양의 방향으로 100px, y축의 양의 방향으로 50px만큼 이동했습니다.</div> </body> </html>