查看效果：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>