1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    #menu1, #menu2, #menu3 { width: 630px; height: 126px; }
    
    #menu1 {
        margin: 20px auto;
        transform: translate(0px, -120px);
    }
    
    #menu1 img, #menu2 img, #menu3 img {
        cursor: pointer;
        transition-property: transform;
        transition-duration: .5s;
    }
    
    #menu1 img:hover {
        transform: translate(0px, 100px);
    }
    
    #menu2 img:hover {
        transform: scale(1.2, 1.5);
    }
    
    #menu3 img:hover {
        transform: rotate(360deg);
    }
    
        
</style>
 
</head>
<body>
 
 
    <!-- ex08.htm -->
    
    
    
    <div id="menu1"><img src="images/rect_icon01.png" /><img src="images/rect_icon02.png" /><img src="images/rect_icon03.png" /><img src="images/rect_icon04.png" /><img src="images/rect_icon05.png" /></div><!-- 이미지 사이 공백 제거하기 위해 붙여쓴다 -->
    
    
    <hr />    
    <div id="menu2"><img src="images/rect_icon01.png" /><img src="images/rect_icon02.png" /><img src="images/rect_icon03.png" /><img src="images/rect_icon04.png" /><img src="images/rect_icon05.png" /></div>
    
    
    <hr />
    <div id="menu3"><img src="images/rect_icon01.png" /><img src="images/rect_icon02.png" /><img src="images/rect_icon03.png" /><img src="images/rect_icon04.png" /><img src="images/rect_icon05.png" /></div>
    
    
 
</body>
</html>
cs


'WEB > HTML5' 카테고리의 다른 글

배운거 적용시켜보기 예제  (0) 2016.01.22
변형하기 예제  (0) 2016.01.22
변형하기 translate / scale / rotate / skew  (0) 2016.01.22
box 예제  (0) 2016.01.22
접기,펼치기 / 수치그래프 / 진행률 / 데이터리스트 / 캔버스 태그  (0) 2016.01.22

+ Recent posts

티스토리툴바