查看效果：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. iOS-中app启动闪退的原因

    这种情况应和所谓的内存不足关系不大,很少有程序会在初始化时载入大量内容导致崩溃,并且这类问题也很容易在开发阶段被发现,所以内存不足造成秒退的可能性低(内存不足退,通常是程序用了一段时间,切换了几个画面 ...

  2. JAVA集合

    为了保存数量不确定的数据或者提供映射关系的数据,Java提供了集合类,也称作集合类,Collection和Map分别为两个根接口.两个接口体系的继承系如下图 (图片来源于网络) Collection接 ...

  3. Sql Server系列：存储过程

    1 存储过程简介 存储过程是使用T-SQL代码编写的代码段.在存储过程中,可以声明变量.执行条件判断语句等其他编程功能.在MS SQL Server 2012中存储过程主要分三类:系统存储过程.自定义 ...

  4. LINQ系列：Linq to Object相等操作符

    相等操作符通过比较两个序列来检查它们相应的元素是否相同.如果两个序列有相同的元素,并且对应元素的值相同,则认为这两个序列是相等的. SequenceEqual操作符判定两个集合是否相等.判定是通过并行 ...

  5. OpenCASCADE PCurve of Topological Face

    OpenCASCADE PCurve of Topological Face eryar@163.com Abstract. OpenCASCADE provides a class BRepBuil ...

  6. Building OpenCASCADE on Debian

    Building OpenCASCADE on Debian eryar@163.com Abstract. When you are familiar with OpenCASCADE on Win ...

  7. Python第一天 - list\字符串截取

    (一)list截取L =['Adam', 'Lisa', 'Bart'] print(L[0:3]) ======>['Adam'(idnex:0), 'Lisa'(index:1), 'Bar ...

  8. C语言 第八章 函数、指针与宏

    一.函数 函数是一个包含完成一定功能的执行代码段.我们可以把函数看成一个"黑盒子", 你只要将数据送进去就能得到结果, 而函数内部究竟是如何工作的的, 外部程序是不知道的.外部程序 ...

  9. table-cell实现宽度自适应布局

    利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...

  10. js构建ui的统一异常处理方案（四）

    上一篇我们介绍了统一异常处理方案的设计方案,这一篇我们将直接做一个小例子,验证我们的设计方案. 例子是一个todo的列表界面(页面代码参考于https://github.com/zongxiao/Dj ...