css3价格斜切_CSS3 transform属性

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

center