• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Transition</title>
7
    <style>
8
        #resize {
9
            background-color: orange;
10
            height: 100px;
11
            width: 150px;
12
            margin: 10px;
13
            -webkit-transition: width 1s, height 3s;
14
            transition: width 1s, height 3s;
15
        }
16
        #resize:hover {
17
            width: 300px;
18
            height: 500px;
19
        }
20
    </style>
21
</head>
22
​
23
<body>
24
​
25
    <h1>요소의 크기 변화</h1>
26
    <div id="resize"></div>
27
    <p>사각형 위로 마우스를 올려놔 보세요!!</p>
28
​
29
</body>
30
​
31
</html>