查看效果：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. Sql Server系列：数据类型转换函数

    T-SQL提供了两个显示转换的函数:CAST函数和CONVERT函数. 1. CAST函数 语法: CAST ( expression AS data_type [ ( length ) ] ) 示例 ...

  2. Minor【 PHP框架】2.第一个应用与请求的生命周期

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  3. 深入理解DOM事件机制系列第三篇——事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...

  4. Introduction to the Service Provider Interfaces--官方文档

    地址:https://docs.oracle.com/javase/tutorial/sound/SPI-intro.html What Are Services? Services are unit ...

  5. （转载）基于LBS地图的开发，满足地图上有头像的需求

    最近做的项目主要是LBS这块 主打成员定位功能 我们的UI设计是这样的 乍一看上去是挺好挺美观的 不同的人会显示不同的头像 可是当人扎堆的时候 问题就来了 当人多的时候(例如上图所示) 地图滑动起来就 ...

  6. swift 新特性

    switch支持任意类型的数据以及各种比较操作——不仅仅是整数以及测试相等. 运行switch中匹配到的子句之后,程序会退出switch语句,并不会继续向下运行,所以不需要在每个子句结尾写break. ...

  7. 小身材大用途，用PrimusUI驾驭你的页面

    “PrimusUI”是自己在借鉴了如今网上很多开源的UI库,再经过自己整理加工的一个简单代码集合. 每个功能块的CSS代码都很少,力求简单易懂,低门槛,代码可根据自己实际情况轻易修改,改到符合自己场景 ...

  8. 记录一则数据库连接故障ORA-12560,ORA-12518

    环境:Win Server 2008 R2 + Oracle 11.2.0.1 故障:客户反映数据库连接不上,本机sysdba和网络连接都连接不上. 一.确认故障 1.1 服务器尝试sysdba登录 ...

  9. 相克军_Oracle体系_随堂笔记011-事物

    数据库主要实现的功能无非是以下三点: ①数据的一致性, ②数据的安全, ③数据的优化.   事物主要影响数据的一致性. 1.事务的基本概念    一组DML语句    insert.delete.up ...

  10. OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(1)

    图像的几何变换是在不改变图像内容的前提下对图像像素的进行空间几何变换,主要包括了图像的平移变换.镜像变换.缩放和旋转等.本文首先介绍了图像几何变换的一些基本概念,然后再OpenCV2下实现了图像的平移 ...