• 코드:
​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
        #skew_x {
16
            background-color: #87CEFA;
17
            border: 3px solid red;
18
            -webkit-transform: skewX(20deg);
19
            -ms-transform: skewX(20deg);
20
            transform: skewX(20deg);
21
        }
22
    </style>
23
</head>
24
​
25
<body>
26
​
27
    <h1>skewX() 메소드를 이용한 요소 기울이기</h1>
28
    <div id="origin">이 요소의 원래 모양입니다.</div>
29
    <div id="skew_x">이 요소는 원래 모양에서 x축을 따라 20도만큼 기울어졌습니다.</div>
30
​
31
</body>
32
​
33
</html>