実用的なCSS 3のtransformは多種のアニメーション効果を実現します。
18046 ワード
表示効果:http://keleyi.com/a/bjad/b6x9q8gs.htm
コードは以下の通りです
コードは以下の通りです
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <base href="http://keleyi.com">
5 <title> CSS3 transform - </title><base target="_blank" />
6 <style type="text/css">
7 .menu ul {
8 border-top: 2px solid #f5f5f5; padding: 0 10px;
9 margin: 0;
10 }
11
12 .menu ul li {
13 padding: 0; margin: 0; list-style: none;
14 }
15
16 .menu ul li a{
17 color: #fff; float: left; margin: 0 5px; font-size: 14px; width: 65px;
18 height: 50px; line-height: 50px; text-align: center; padding: 10px 5px; background: #151515;
19 border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
20 box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
21 text-shadow: 0 1px 1px #686868;
22 text-decoration: none;
23 }
24 .menu ul li.translate a{
25 background: #2EC7D2;
26 }
27 .menu ul li.translate-x a {
28 background: #8FDD21;
29 }
30 .menu ul li.translate-y a {
31 background: #F45917;
32 }
33 .menu ul li.rotate a {
34 background: #D50E19;
35 }
36 .menu ul li.scale a {
37 background: #cdddf2;
38 }
39 .menu ul li.scale-x a {
40 background: #0fDD21;
41 }
42 .menu ul li.scale-y a {
43 background: #cd5917;
44 }
45 .menu ul li.skew a {
46 background: #519;
47 }
48 .menu ul li.skew-x a {
49 background: #D50;
50 }
51 .menu ul li.skew-y a {
52 background: #E19;
53 }
54 .menu ul li.matrix a {
55 background: #919;
56 }
57
58 /* x- */
59 .menu ul li.translate-x a:hover {
60 -moz-transform: translateX(-10px);
61 -webkit-transform: translateX(-10px);
62 -o-transform: translateX(-10px);
63 -ms-transform: translateX(-10px);
64 transform: translateX(-10px);
65 }
66
67 /* y- */
68 .menu ul li.translate-y a:hover {
69 -moz-transform: translateY(-10px);
70 -webkit-transform: translateY(-10px);
71 -o-transform: translateY(-10px);
72 -ms-transform: translateY(-10px);
73 transform: translateY(-10px);
74 }
75 /* x/y */
76 .menu ul li a:hover {
77 -moz-transform: translate(-10px,-10px);
78 -webkit-transform: translate(-10px,-10px);
79 -o-transform: translate(-10px,-10px);
80 -ms-transform: translate(-10px, -10px);
81 transform: translate(-10px,-10px);
82 }
83
84 /* */
85 .menu ul li.rotate a:hover {
86 -moz-transform: rotate(45deg);
87 -webkit-transform: rotate(45deg);
88 -o-transform: rotate(45deg);
89 -ms-transform: rotate(45deg);
90 transform: rotate(45deg);
91 }
92
93 /* */
94 .menu ul li.scale a:hover {
95 -moz-transform: scale(0.8,0.8);
96 -webkit-transform: scale(0.8,0.8);
97 -o-transform: scale(0.8,0.8);
98 -ms-transform: scale(0.8,0.8);
99 transform: scale(0.8,0.8);
100 }
101 .menu ul li.scale-x a:hover {
102 -moz-transform: scaleX(0.8);
103 -webkit-transform: scaleX(0.8);
104 -o-transform: scaleX(0.8);
105 -ms-transform: scaleX(0.8);
106 transform: scaleX(0.8);
107 }
108 .menu ul li.scale-y a:hover {
109 -moz-transform: scaleY(1.2);
110 -webkit-transform: scaleY(1.2);
111 -o-transform: scaleY(1.2);
112 -ms-transform: scaleY(1.2);
113 transform: scaleY(1.2);
114 }
115
116 /* */
117 .menu ul li.skew a:hover {
118 -moz-transform: skew(45deg,15deg);
119 -webkit-transform: skew(45deg,15deg);
120 -o-transform: skew(45deg,15deg);
121 -ms-transform: skew(45deg,15deg);
122 transform: skew(45deg,15deg);
123 }
124
125 /** transform:skewX(x) */
126 .menu ul li.skew-x a:hover {
127 -moz-transform: skewX(-30deg);
128 -webkit-transform: skewX(-30deg);
129 -o-transform: skewX(-30deg);
130 -ms-transform: skewX(-30deg);
131 transform: skewX(-30deg);
132 }
133
134 /** transform:skewY(y) */
135 .menu ul li.skew-y a:hover {
136 -moz-transform: skewY(30deg);
137 -webkit-transform: skewY(30deg);
138 -o-transform: skewY(30deg);
139 -ms-transform: skewY(30deg);
140 transform: skewY(30deg);
141 }
142
143
144 .menu ul li.matrix a:hover {
145 -moz-transform: matrix(1,1,-1,0,0,0);
146 -webkit-transform: matrix(1,1,-1,0,0,0);
147 -o-transform: matrix(1,1,-1,0,0,0);
148 -ms-transform: matrix(1,1,-1,0,0,0);
149 transform: matrix(1,1,-1,0,0,0);
150 }
151 </style>
152 </head>
153
154 <body>
155 <div class="menu">
156 <ul class="clearfix">
157 <li class="item translate"><a href="http://keleyi.com/a/bjad/b6x9q8gs.htm">Translate</a></li>
158 <li class="item translate-x"><a href="http://keleyi.com/a/bjac/2fs4sdog.htm">TranslateX</a></li>
159 <li class="item translate-y"><a href="http://keleyi.com/a/bjac/3iote6u9.htm">TranslateY</a></li>
160 <li class="item rotate"><a href="http://keleyi.com/a/bjad/8pwhsjna.htm">Rotate</a></li>
161 <li class="item scale"><a href="http://keleyi.com/a/bjac/xvcdrv0w.htm">Scale</a></li>
162 <li class="item scale-x"><a href="http://keleyi.com/a/bjad/7svi1lby.htm">ScaleX</a></li>
163 <li class="item scale-y"><a href="http://keleyi.com/a/bjac/fsjrtc0j.htm">ScaleY</a></li>
164 <li class="item skew"><a href="http://keleyi.com/a/bjad/mroxdkos.htm">Skew</a></li>
165 <li class="item skew-x"><a href="http://keleyi.com/a/bjac/kwxcvl59.htm">SkewX</a></li>
166 <li class="item skew-y"><a href="http://keleyi.com/a/bjac/3pipmkmg.htm">SkewY</a></li>
167 <li class="item matrix"><a href="http://keleyi.com/a/bjac/eu7eaagg.htm">Matrix</a></li>
168 </ul>
169 </div>
170 </body>
171 </html>