• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 2D Transform</title>
7
    <style>
8
        div {
9
            height: 150px;
10
            width: 200px;
11
            position: absolute;
12
        }
13
        #origin { border: 3px solid black; }
14
        #trans {
15
            background-color: #87CEFA;
16
            border: 3px solid red;
17
            -webkit-transform: translate(100px, 50px);
18
            -ms-transform: translate(100px, 50px);
19
            transform: translate(100px, 50px);
20
        }
21
    </style>
22
</head>
23
​
24
<body>
25
​
26
    <h1>translate() 메소드를 이용한 요소의 이동</h1>
27
    <div id="origin">이 요소의 원래 위치입니다.</div>
28
    <div id="trans">이 요소는 원래 위치에서 x축의 양의 방향으로 100px, y축의 양의 방향으로 50px만큼 이동했습니다.</div>
29
​
30
</body>
31
​
32
</html>