• 코드:
​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
            margin: 100px
13
        }
14
        #origin { border: 3px solid black; }
15
        #scale_in {
16
            border: 3px solid red;
17
            -webkit-transform: scale(1.5, 2);
18
            -ms-transform: scale(1.5, 2);
19
            transform: scale(1.5, 2);
20
        }
21
        #scale_de {
22
            border: 3px solid orange;
23
            -webkit-transform: scale(0.7, 0.7);
24
            -ms-transform: scale(0.7, 0.7);
25
            transform: scale(0.7, 0.7);
26
        }
27
    </style>
28
</head>
29
​
30
<body>
31
​
32
    <h1>scale() 메소드를 이용한 요소의 크기 조절</h1>
33
    <div id="origin">이 요소의 원래 크기입니다.</div>
34
    <div id="scale_in">이 요소는 원래 크기에서 너비는 1.5배, 높이는 2배 커졌습니다.</div>
35
    <div id="scale_de">이 요소는 원래 크기에서 너비는 0.7배, 높이는 0.7배 작아졌습니다.</div>
36
​
37
</body>
38
​
39
</html>