全面回顾css3的api，方能更好地在实践中使用

2D转换

浏览器支持

translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数 例如：

div{ transform: translate(50px, 100px); -ms-transform: translate(50px, 100px); /* IE 9 */ -webkit-transform: translate(50px, 100px); /* Safari and Chrome */ -o-transform: translate(50px, 100px); /* Opera */ -moz-transform: translate(50px, 100px); /* Firefox */ }

当然，x,y可以使用百分比，于是就有了水平垂直居中的另一种解决方案：(可惜ie8是无福消受了)

.container { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; background-color: blue; transform: translate(-50%, -50%); // 移动自身的50% -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */ -o-transform: translate(-50%, -50%); /* Opera */ -moz-transform: translate(-50%, -50%); /* Firefox */ } <div class="container"> </div> rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 div { transform: rotate(30deg); // 允许负值 -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数(注意：是根据左上角的坐标参考的) div { transform: scale(30deg); // 允许负值 -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数（根据中心点的坐标参考） div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ } matrix()： matrix() 方法把所有 2D 转换方法组合在一起。 matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }

3D转换

浏览器兼容

rotateX() 方法:元素围绕其 X 轴以给定的度数进行旋转。

rotateY() 方法元素围绕其 Y 轴以给定的度数进行旋转。

用法与2D转换相同