标签：
在CSS2.1的时候，页面都是静态了，我们仅仅能通过 hover 这样的伪类来实现简单的动画交互。在CSS3中，很大的一个进步就是能轻松类似于倾斜、缩放、变形、移动和翻转等效果，这些原本是需要借助js和flash等技术来实现的。
CSS3变形能动态控制元素，在屏幕上移动他们，缩小、放大和旋转等。通过CSS变形，不仅能让元素实现静态视觉效果，还可以配合CSS3的transition和动画的keyframe产生一些动画效果
CSS3的变形主要通过 transform 属性来实现，transform属性指一组转换函数，基本语法如下所示：
transform:none | <transform-function> [<transform-function>]*
可以用于内联元素和块级元素，默认值为none，表示元素不变形。另外一个属性值是1至多个变形函数，函数之间用空格隔开。transform-function的常用函数如下所示：
translate() 移动元素，可以根据X和Y轴坐标系来重新定位元素的位置
scale() 放大或缩小元素，接收一个数值参数
rotate() 旋转元素，接收一个角度参数
skew() 让元素倾斜，接收一个角度参数
matrix() 矩阵变形，基于X和Y轴坐标系重新定位元素
下面是这些函数的基本用法示例，基本代码如下:
<!DOCTYPE html> <html> <head> <title>transform</title> <meta charset="utf-8" /> <style type="text/css"> body{background:#eee;} *{margin:0; padding:0; font-family:Arial;} .wrap{transition:all 0.5s ease-in-out; width:80px; background:#92B901; color:#fff; text-align:center; padding:10px; border-radius:6px; font-size:18px;} </style> </head> <body> <div class="wrap"></div> </body> </html>
使用 scale() 函数放大元素：
.wrap:hover{transform:scale(1.4);}
这样元素就能扩大至原来的1.4倍。使用 scale() 函数将元素缩小至原来的0.8倍，如下:
.wrap:hover{transform:scale(0.8);}
标签：
原文地址：http://www.cnblogs.com/suliang1100/p/4723714.html
