在介绍有关transform相关的知识之前，先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位。另外，在使用时，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。

transform-origin

设置对象变换的原点，通常和rotate旋转、scale缩放、skew斜切等一起使用，IE9+

2D情况下：默认值 50% 50%，即center center

3D情况下：默认值 50% 50% 0

取值介绍：

X轴：left｜center｜right｜length｜%

Y轴：top｜center｜bottom｜length｜%

Z轴：length

注意：如果只设置一个值，则该值作用于横坐标，纵坐标默认50%，Z轴默认为0，另外百分比是相对于自身进行计算的。

如：

{ transform: rotate(45deg); transform-origin: 0 0; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin: 0 0; -moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin: 0 0; -webkit-transform: rotate(45deg); /* Safari Opera and Chrome */ -webkit-transform-origin: 0 0; }

效果图：

角度的单位

CSS3新增，角度单位有四种，在所有可使用角度的地方均可使用这四种单位，但是需要注意兼容性，除turn单位外其他单位均可兼容IE9+浏览器版本。

单位说明：

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

单位说明
deg度数，一个圆共360度，IE9+
grad梯度，一个圆共400梯度，IE9+
rad弧度，一个圆共2n弧度，IE9+
turn转、圈，一个圆共1转，IE＋ FireFox13.0+

transform

变换，可对元素进行位移、旋转、缩放、倾斜操作，支持2D或者3D转换，IE9+支持。

目录

translate 位移

rotate 旋转

scale 缩放

skew 斜切

变换综合应用

translate 位移

对象进行2D空间或3D空间的位移。 使用规则：

translate(): 第一个参数指定X轴的位移量[必须], 第二个参数指定Y轴的位移量[当不设置时, 默认为0]; translateX(): 指定X轴的位移; translateY(): 指定Y轴的位移; translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可; translateZ(): 指定Z轴的位移;

使用translate时需要注意位移量的百分比是相对元素自身宽高来计算的。

translate有一个最常见的应用，即当元素宽度高度不固定时，使用translate可实现水平以及垂直方向的居中。

代码示例：

dom结构

<div class="box"> <div class="item">center</div> </div>

样式设计

.box{ position: relative; width: 300px; height: 300px; border: 1px solid; } .item{ position: absolute; padding: 50px; background-color: #fb3; top: 50%; /*相对于父级*/ left: 50%; transform: translate(-50%, -50%); /*相对自身*/ -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

效果图：

rotate 旋转

对象进行2D空间或3D空间旋转。常与 transform-origin 一起使用。

使用规则：