查看效果：http://keleyi.com/a/bjad/b6x9q8gs.htm

以下是代码：

 <!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 class="menu">

 <ul class="clearfix">

 <li class="item translate"><a href="http://keleyi.com/a/bjad/b6x9q8gs.htm">Translate</a></li>

 <li class="item translate-x"><a href="http://keleyi.com/a/bjac/2fs4sdog.htm">TranslateX</a></li>

 <li class="item translate-y"><a href="http://keleyi.com/a/bjac/3iote6u9.htm">TranslateY</a></li>

 <li class="item rotate"><a href="http://keleyi.com/a/bjad/8pwhsjna.htm">Rotate</a></li>

 <li class="item scale"><a href="http://keleyi.com/a/bjac/xvcdrv0w.htm">Scale</a></li>

 <li class="item scale-x"><a href="http://keleyi.com/a/bjad/7svi1lby.htm">ScaleX</a></li>

 <li class="item scale-y"><a href="http://keleyi.com/a/bjac/fsjrtc0j.htm">ScaleY</a></li>

 <li class="item skew"><a href="http://keleyi.com/a/bjad/mroxdkos.htm">Skew</a></li>

 <li class="item skew-x"><a href="http://keleyi.com/a/bjac/kwxcvl59.htm">SkewX</a></li>

 <li class="item skew-y"><a href="http://keleyi.com/a/bjac/3pipmkmg.htm">SkewY</a></li>

 <li class="item matrix"><a href="http://keleyi.com/a/bjac/eu7eaagg.htm">Matrix</a></li>

 </ul>

 </div>

 </body>

 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

实用CSS3的transform实现多种动画效果的更多相关文章

  1. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  2. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  3. 拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  4. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

  5. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  6. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  7. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  8. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  9. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

随机推荐

  1. SSIS 参数的值

    一,SSIS Parameter Value 的type 一个Parameter的Value共有三种类型,分别是Design Value,Server Value,Execution Value. D ...

  2. ClickOnce部署（1）：一些发布方式

    ClickOnce是什么玩意儿,这个问题嘛,在21世纪的互联网严重发达的时代,估计也没有必要大费奏章去介绍了,弄不好的话,还有抄袭之嫌.因此,有关ClickOnce的介绍,各位朋友可以直接查找MSDN ...

  3. Android自用-----WindowManager$BadTokenException: Unable to add window -- token null is not for an application

    转自http://www.cnblogs.com/oakpip/archive/2011/04/06/2007310.html 错误产生: private Context mcontext; @Ove ...

  4. 感恩回馈，新鲜出炉的《ASP.NET MVC 5框架揭秘》免费赠送

    上次针对<ASP.NET Web API 2框架揭秘>举办了一次评论赠书活动,很多人问我相同的活动要不要针对<ASP.NET MVC 5框架揭秘>(阅读样章)再来一次,为此我向 ...

  5. iOS开发之地图与定位

    无论是QQ还是微信的移动客户端都少不了定位功能,之前在微信demo中没有添加定位功能,今天就写个定位的小demo来了解一下定位和地图的东西.地图和定位看上去是挺高大上一东西,其实用法比TableVie ...

  6. UCOSII内核代码分析

    1 UCOSII定义的关键数据结构 OS_EXT  INT8U             OSIntNesting; OSIntNesting用于判断当前系统是否正处于中断处理例程中. OS_EXT   ...

  7. 【记录】ASP.NET MVC JsonResult JsonRequestBehavior AllowGet

    JS Ajax 调用代码: $.ajax({ url: "/AjaxController/GetInfoById", type: 'GET', datatype: "js ...

  8. JAVA安全模型

    作为一种诞生于互联网兴起时代的语言,Java 从一开始就带有安全上的考虑,如何保证通过互联网下载到本地的 Java 程序是安全的,如何对 Java 程序访问本地资源权限进行有限授权,这些安全角度的考虑 ...

  9. 在Visual Studio 2012中使用VMSDK开发领域特定语言（一）

    前言 本专题主要介绍在Visual Studio 2012中使用Visualization & Modeling SDK进行领域特定语言(DSL)的开发,包括两个部分的内容.在第一部分中,将对 ...

  10. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...