查看效果：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. SpringAOP之动态代理

    一.动态代理: 1.在原有的静态代理的基础上进一步的完善,由于静态代理中,重复写了相同的代码使得代码的整体结构显得冗余,而且还不同的核心类还需要有不用的代理类,是写死了的具体的类.所以需要使用动态代理 ...

  2. 移动web app开发必备 - Deferred 源码分析

    姊妹篇  移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...

  3. iOS开发之地图与定位

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

  4. codefordream 关于js初级训练

    这里的初级训练相对简单,差不多都是以前知识温习. 比如输出“hello world”,直接使用console.log()就行.注释符号,“//”可以注释单行,快捷键 alt+/,"/*   ...

  5. Oracle OCP 1Z0-053 Exam Topics

    根据OU官方发布的考试大纲,OCP 1Z0-053考点如下: 1. Database Architecture and ASM Describe Automatic Storage Managemen ...

  6. Kooboo CMS - @Html.FrontHtml().HtmlTitle() 详解

    首先我们找到这个类. 这个类有如下的方法: #region Title & meta [Obsolete("Use HtmlTitle")] public IHtmlStr ...

  7. 自定义angularjs分页控件

    继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...

  8. 为你带来灵感的 20 个 HTML5/CSS3 模板

    1. Curve 2. Tapestry 3. Aqueous 4. Deliccio 5. Respond 1.5 6. Triangle Responsive 7. Design Company ...

  9. JetBrains.DotMemory.Keygen.4.x

    GoogleN久都没找到这一类的工具. 只好折腾一个了. CSDN 免积分 0积分 下载 http://download.csdn.net/detail/caizz520/7477865 全球首发-V ...

  10. PetaPoco4.0的事务为什么不会回滚

    using (var srop=DbHelper.CurrentDb.GetTransaction()) { ID = bp.AddModel(model).ToStr(); #region 参与楼盘 ...