• 코드:
​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
        .rotate {
15
            background-color: #87CEFA;
16
            border: 3px solid red;
17
        }
18
        #rotate_01 {
19
            -webkit-transform: rotateY(20deg);
20
            transform: rotateY(20deg);
21
        }
22
        #rotate_02 {
23
            -webkit-transform: rotateY(40deg);
24
            transform: rotateY(40deg);
25
        }
26
        #rotate_03 {
27
            -webkit-transform: rotateY(60deg);
28
            transform: rotateY(60deg);
29
        }
30
        #rotate_04 {
31
            -webkit-transform: rotateY(80deg);
32
            transform: rotateY(80deg);
33
        }
34
        #rotate_05 {
35
            -webkit-transform: rotateY(100deg);
36
            transform: rotateY(100deg);
37
        }
38
        #rotate_06 {
39
            -webkit-transform: rotateY(120deg);
40
            transform: rotateY(120deg);
41
        }
42
        #rotate_07 {
43
            -webkit-transform: rotateY(140deg);
44
            transform: rotateY(140deg);
45
        }
46
        #rotate_08 {
47
            -webkit-transform: rotateY(160deg);
48
            transform: rotateY(160deg);
49
        }
50
        #rotate_09 {
51
            -webkit-transform: rotateY(180deg);
52
            transform: rotateY(180deg);
53
        }
54
    </style>
55
</head>
56
​
57
<body>
58
​
59
    <h1>rotateY() 메소드를 이용한 요소의 회전</h1>
60
​
61
    <div id="origin">이 요소의 원래 모양입니다.</div>
62
    <div id="rotate_01" class="rotate">이 요소는 원래 모양에서 y축을 기준으로 z축의 양의 방향으로 20도만큼 회전했습니다.</div>
63
    <div id="rotate_02" class="rotate">이 요소는 원래 모양에서 y축을 기준으로 z축의 양의 방향으로 40도만큼 회전했습니다.</div>
64
    <div id="rotate_03" class="rotate">이 요소는 원래 모양에서 y축을 기준으로 z축의 양의 방향으로 60도만큼 회전했습니다.</div>
65
    <div id="rotate_04" class="rotate">이 요소는 원래 모양에서 y축을 기준으로 z축의 양의 방향으로 80도만큼 회전했습니다.</div>
66
    <div id="rotate_05" class="rotate">이 요소는 원래 모양에서 y축을 기준으로 z축의 양의 방향으로 100도만큼 회전했습니다.</div>
67
    <div id="rotate_06" class="rotate">이 요소는 원래 모양에서 y축을 기준으로 z축의 양의 방향으로 120도만큼 회전했습니다.</div>
68
    <div id="rotate_07" class="rotate">이 요소는 원래 모양에서 y축을 기준으로 z축의 양의 방향으로 140도만큼 회전했습니다.</div>
69
    <div id="rotate_08" class="rotate">이 요소는 원래 모양에서 y축을 기준으로 z축의 양의 방향으로 160도만큼 회전했습니다.</div>
70
    <div id="rotate_09" class="rotate">이 요소는 원래 모양에서 y축을 기준으로 z축의 양의 방향으로 180도만큼 회전했습니다.</div>
71
​
72
</body>
73
​
74
</html>