• 코드:
​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: 30px
13
        }
14
        #origin { border: 3px solid black; }
15
        #matrix {
16
            background-color: #87CEFA;
17
            border: 3px solid red;
18
            -webkit-transform: matrix(0.7, 0, 0, 0.7, 1, 0);
19
            -ms-transform: matrix(0.7, 0, 0, 0.7, 0, 0);
20
            transform: matrix(2, 0.3, 0.2, 1.3, 150, 100);
21
        }
22
    </style>
23
</head>
24
​
25
<body>
26
​
27
    <h1>matrix() 메소드를 이용한 transform</h1>
28
​
29
    <div id="origin">이 요소의 원래 모양입니다.</div>
30
    <div id="matrix">이 요소는 원래 모양에서
31
        너비는 2배, 높이는 1.3배만큼 커졌으며,
32
        기울기는 x축을 따라 20도, y축을 따라 30도만큼 기울어졌으며
33
        위치는 x축의 양의 방향으로 150px, y축의 양의 방향으로 100px만큼 이동하였습니다.
34
    </div>
35
​
36
</body>
37
​
38
</html>