Css3 Transform
简介
通过对于元素进行transform设置达到一些变形的效果
transform包含以下几种：
- n rotate 旋转
- n skew 扭曲
- n scale缩放
- n translate 移动
- n matrix 矩阵变换
支持的浏览器
目前支持application cache的浏览器如下：
- n IE 9+
- n Firefox 3.6+
- n Chome 17+
- n Safari 5+
- n Opera1 1.6+
- n Android browser 2.1+
- n Ios safari 3.2+
语法
标准写法
transform ： none | <transform-function> [ <transform-function> ]*
临时写法：
- n webkit内核: -webkit-transform
- n Mozilla内核: -moz-transform
- n Opera内核: -o-transform
- n Ms: -ms-tranform
transform-function
属性 | 参数 | 描述 |
translate | (<translation-value>[, <translation-value>]) | 移动 |
translateX | (<translation-value>) | 沿x轴移动 |
translateY | (<translation-value>) | 沿y轴移动 |
scale | (<number>[, <number>]) | 缩放 |
scaleX | (<number>) | 在x轴缩放 |
skew | (<angle> [, <angle>]) | 斜切变换 |
skewX | (<angle>) | 沿x轴斜切变换 |
skewY | (<angle>) | 沿Y轴斜切变换 |
rotate | (<angle>) | 旋转角度，正数顺时针 |
matrix | (<number>, <number>, <number>, <number>, <number>, <number>) | 以变换矩阵的形式指定一个2D变换 |
与transform配套的还有一个transform-origin，不设置的话，转换的中心点在元素的中心。可以通过设置transform-origin来指定一个元素的基点。设置的方式同background-position
Demo
<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 基础样式 */
.menu ul {padding: 0 10px; }
.menu ul li{list-style: none;}
.menu ul li a{ color: #fff; float: left; margin: 30px 2px; font-size: 14px; height: 50px; line-height: 50px; text-align: center; width: 200px; padding: 10px 1px; background: #151515; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; text-shadow: 0 1px 1px #686868; text-decoration: none; }
.menu ul li a{ background:#999; }
/* 特性demo */
.menu ul li.translate 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.translate-x a:hover { -moz-transform: translateX(-10px); -webkit-transform: translateX(-10px); -o-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); }
.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); }
.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); }
.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); }
.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="#">translate(-10px,-10px)</a></li>
<li class="item translate-x"><a href="#">translateX(-10px)</a></li>
<li class="item translate-y"><a href="#">translateY(-10px)</a></li>
<li class="item rotate"><a href="#">rotate(45deg)</a></li>
<li class="item scale"><a href="#">scale(0.8,0.8)</a></li>
<li class="item scale-x"><a href="#">scaleX(0.8)</a></li>
<li class="item scale-y"><a href="#">scaleY(1.2)</a></li>
<li class="item skew"><a href="#">skew(45deg,15deg)</a></li>
<li class="item skew-x"><a href="#">skewX(-30deg)</a></li>
<li class="item skew-y"><a href="#">skewY(30deg)</a></li>
<li class="item matrix"><a href="#">matrix(1,1,-1,0,0,0)</a></li>
</ul>
</div>
</body>
</html>注意事项
Transform设置多个属性时，属性间用空格隔开
Transform 的本质：我们的任何一个html元素渲染完成后可以得到一张位图，把这张位图上所有的点都做一次矩阵运算，将得到一张的新的位图
html 的结构没有改变依然存在文档流，只是元素的外观被repaint后展示给用户，其他元素的布局不受影响