实用CSS3的transform实现多种动画效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="http://keleyi.com"> <title>实用CSS3的transform实现多种动画效果-柯乐义</title><base target="_blank" /><style type="text/css"> .menu ul { border-top: 2px solid #f5f5f5; padding: 0 10px; margin: 0; } .menu ul li { padding: 0; margin: 0; list-style: none; } .menu ul li a{ color: #fff; float: left; margin: 0 5px; font-size: 14px; width: 65px; height: 50px; line-height: 50px; text-align: center; padding: 10px 5px; background: #151515;border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; 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; text-shadow: 0 1px 1px #686868; text-decoration: none; } .menu ul li.translate a{ background: #2EC7D2; } .menu ul li.translate-x a { background: #8FDD21; } .menu ul li.translate-y a { background: #F45917; } .menu ul li.rotate a { background: #D50E19; } .menu ul li.scale a { background: #cdddf2; } .menu ul li.scale-x a { background: #0fDD21; } .menu ul li.scale-y a { background: #cd5917; } .menu ul li.skew a { background: #519; } .menu ul li.skew-x a { background: #D50; } .menu ul li.skew-y a { background: #E19; } .menu ul li.matrix a { background: #919; } /* x-轴偏移*/ .menu ul li.translate-x a:hover { -moz-transform: translateX(-10px); -webkit-transform: translateX(-10px); -o-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } /* y-轴偏移*/ .menu ul li.translate-y a:hover { -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } /* x/y 轴都偏移*/ .menu ul li a:hover { -moz-transform: translate(-10px,-10px); -webkit-transform: translate(-10px,-10px); -o-transform: translate(-10px,-10px); -ms-transform: translate(-10px, -10px); transform: translate(-10px,-10px); } /* 角度旋转 */ .menu ul li.rotate a:hover { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* 缩放 缩放都是以原元素中心点为参考点的 */ .menu ul li.scale a:hover { -moz-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); -o-transform: scale(0.8,0.8); -ms-transform: scale(0.8,0.8); transform: scale(0.8,0.8); } .menu ul li.scale-x a:hover { -moz-transform: scaleX(0.8); -webkit-transform: scaleX(0.8); -o-transform: scaleX(0.8); -ms-transform: scaleX(0.8); transform: scaleX(0.8); } .menu ul li.scale-y a:hover { -moz-transform: scaleY(1.2); -webkit-transform: scaleY(1.2); -o-transform: scaleY(1.2); -ms-transform: scaleY(1.2); transform: scaleY(1.2); } /* 旋转 */ .menu ul li.skew a:hover { -moz-transform: skew(45deg,15deg); -webkit-transform: skew(45deg,15deg); -o-transform: skew(45deg,15deg); -ms-transform: skew(45deg,15deg); transform: skew(45deg,15deg); } /** transform:skewX(x) */ .menu ul li.skew-x a:hover { -moz-transform: skewX(-30deg); -webkit-transform: skewX(-30deg); -o-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); } /** transform:skewY(y) */ .menu ul li.skew-y a:hover { -moz-transform: skewY(30deg); -webkit-transform: skewY(30deg); -o-transform: skewY(30deg); -ms-transform: skewY(30deg); transform: skewY(30deg); } .menu ul li.matrix a:hover { -moz-transform: matrix(1,1,-1,0,0,0); -webkit-transform: matrix(1,1,-1,0,0,0); -o-transform: matrix(1,1,-1,0,0,0); -ms-transform: matrix(1,1,-1,0,0,0); transform: matrix(1,1,-1,0,0,0); } </style> </head> <body> <div > <ul > <li ><a href="http://keleyi.com/a/bjad/b6x9q8gs.htm">Translate</a></li> <li ><a href="http://keleyi.com/a/bjac/2fs4sdog.htm">TranslateX</a></li> <li ><a href="http://keleyi.com/a/bjac/3iote6u9.htm">TranslateY</a></li> <li ><a href="http://keleyi.com/a/bjad/8pwhsjna.htm">Rotate</a></li> <li ><a href="http://keleyi.com/a/bjac/xvcdrv0w.htm">Scale</a></li> <li ><a href="http://keleyi.com/a/bjad/7svi1lby.htm">ScaleX</a></li> <li ><a href="http://keleyi.com/a/bjac/fsjrtc0j.htm">ScaleY</a></li> <li ><a href="http://keleyi.com/a/bjad/mroxdkos.htm">Skew</a></li> <li ><a href="http://keleyi.com/a/bjac/kwxcvl59.htm">SkewX</a></li> <li ><a href="http://keleyi.com/a/bjac/3pipmkmg.htm">SkewY</a></li> <li ><a href="http://keleyi.com/a/bjac/eu7eaagg.htm">Matrix</a></li> </ul> </div> </body> </html>