• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Transition</title>
7
    <style>
8
        #windmill {
9
            background-color: orange;
10
            height: 100px;
11
            width: 100px;
12
            margin: 10px;
13
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
14
            transition: width 2s, height 2s, transform 2s;
15
        }
16
        #windmill:hover {
17
            width: 300px;
18
            height: 300px;
19
            -webkit-transform: rotateY(180deg);
20
            transform: rotateY(180deg);
21
        }
22
    </style>
23
</head>
24
​
25
<body>
26
​
27
    <h1>전환(transition) 효과와 변환(transform) 효과의 동시 적용</h1>
28
    <div id="windmill"></div>
29
    <p>사각형 위로 마우스를 올려놔 보세요!!</p>
30
​
31
</body>
32
​
33
</html>