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