查看效果：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. jquery-懒加载插件

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪, 系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 从此可知,再好的网站,再炫的网站, ...

  2. 基于redis实现可靠的分布式锁

    什么是锁 今天要谈的是如何在分布式环境下实现一个全局锁,在开始之前先说说非分布式下的锁: 单机 – 单进程程序使用互斥锁mutex,解决多个线程之间的同步问题 单机 – 多进程程序使用信号量sem,解 ...

  3. MongoDB 安装和可视化工具

    MongoDB 是一款非常热门的NoSQL,面向文档的数据库管理系统,官方下载地址是:MongoDB,博主选择的是 Enterprise Server (MongoDB 3.2.9)版本,安装在Win ...

  4. js实现匀速运动及透明度动画

    1.html代码 <body> <div id="container"> <span id="btn"></span& ...

  5. MVC4做网站Demo进行重写的问题。

    自从学习MVC4开始,边学边写这个demo,写了也有一年多了.开始觉得是一个小例子把所有的代码都写在一个项目中,边写边改越写越混乱,越到后来很多东西自己都理不清了.后来在群里跟 @怒放 在讨论这个问题 ...

  6. 前端学PHP之变量

    × 目录 [1]变量定义 [2]关键字 [3]变量赋值[4]可变变量[5]变量函数 前面的话 变量是用于临时存储值的容器.这些值可以是数字.文本,或者复杂得多的排列组合.变量在任何编程语言中都居于核心 ...

  7. 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

    × 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...

  8. Android随笔之——按键长按事件onKeyLongPress

    现在安卓手机实体键是越来越少了,但还是有的,恰好自己就碰上了:按键的长按事件...百度了一些博客,内容都基本上是完全一样的,虽然可以捕获到长按事件,但却会和正常的单击冲突.幸好最近开个VPN,goog ...

  9. php上传功能集后缀名判断和随机命名

    form.php <html> <head> <meta http-equiv="content-type" content="text/h ...

  10. 1Z0-053 争议题目解析681

    1Z0-053 争议题目解析681 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 681.The environmental variable ORACLE-BASE is set ...