實用CSS3的transform實現多種動畫效果

檢視效果：

以下是**：

1

doctype html public "-//w3c//dtd html 4.01 transitional//en"
>
2<
html
>
3<
head
>
4<
base 
href
="">
5<
title
>實用css3的transform實現多種動畫效果-柯樂義
title
><
base 
target
="_blank"
/>
6<
style 
type
="text/css"
>
7.menu ul 
1112
.menu ul li 
1516
.menu ul li a
24.menu ul li.translate a
27.menu ul li.translate-x a 
30.menu ul li.translate-y a 
33.menu ul li.rotate a 
36.menu ul li.scale a 
39.menu ul li.scale-x a 
42.menu ul li.scale-y a 
45.menu ul li.skew a 
48.menu ul li.skew-x a 
51.menu ul li.skew-y a 
54.menu ul li.matrix a 
5758
/*x-軸偏移
*/59
.menu ul li.translate-x a:hover 
6667
/*y-軸偏移
*/68
.menu ul li.translate-y a:hover 
75/*
x/y 軸都偏移
*/76
.menu ul li a:hover 
8384
/*角度旋轉 
*/85
.menu ul li.rotate a:hover 
9293
/*縮放 縮放都是以原元素中心點為參考點的 
*/94
.menu ul li.scale a:hover 
101.menu ul li.scale-x a:hover 
108.menu ul li.scale-y a:hover 
115116
/*旋轉 
*/117
.menu ul li.skew a:hover 
124125
/** transform:skewx(x) 
*/126
.menu ul li.skew-x a:hover 
133134
/** transform:skewy(y) 
*/135
.menu ul li.skew-y a:hover 
142143
144.menu ul li.matrix a:hover 
151style
>
152head
>
153154
<
body
>
155<
div 
class
="menu"
>
156<
ul class
="clearfix"
>
157<
li class
="item translate"
><
a href
="">translate
a>
li>
158<
li class
="item translate-x"
><
a href
="/a/bjac/2fs4sdog.htm"
>translatex
a>
li>
159<
li class
="item translate-y"
><
a href
="/a/bjac/3iote6u9.htm"
>translatey
a>
li>
160<
li class
="item rotate"
><
a href
="/a/bjad/8pwhsjna.htm"
>rotate
a>
li>
161<
li class
="item scale"
><
a href
="/a/bjac/xvcdrv0w.htm"
>scale
a>
li>
162<
li class
="item scale-x"
><
a href
="/a/bjad/7svi1lby.htm"
>scalex
a>
li>
163<
li class
="item scale-y"
><
a href
="/a/bjac/fsjrtc0j.htm"
>scaley
a>
li>
164<
li class
="item skew"
><
a href
="/a/bjad/mroxdkos.htm"
>skew
a>
li>
165<
li class
="item skew-x"
><
a href
="/a/bjac/kwxcvl59.htm"
>skewx
a>
li>
166<
li class
="item skew-y"
><
a href
="/a/bjac/3pipmkmg.htm"
>skewy
a>
li>
167<
li class
="item matrix"
><
a href
="/a/bjac/eu7eaagg.htm"
>matrix
a>
li>
168ul
>
169div
>
170body
>
171html
>

web前端：

CSS3實用方法總結 推薦

1.圓角邊框 css code複製內容到剪貼簿 2.box陰影 css code複製內容到剪貼簿 3.背景大小 css code複製內容到剪貼簿 4.背景位置 css code複製內容到剪貼簿 5.文字陰影 css code複製內容到剪貼簿 6.強制自動換行 css code複製內容到剪貼簿 7.分...

實用的css3樣式

1.word wrap word wrap normal break word 只在允許的斷字點換行 瀏覽器保持預設處理 斷字 在長單詞或url位址內部進行換行。2.font face internet explorer 9 firefox,chrome,safari,和 opera 支援 woff...

實用CSS3的transform實現多種動畫效果

檢視效果 以下是 1 doctype html public w3c dtd html 4.01 transitional en 2 html 3 head 4 base href 5 title 實用css3的transform實現多種動畫效果 柯樂義 title base target blan...