css3（2D 和3D）

不同浏览器的内核和前缀

Chrome(谷歌浏览器) ：WebKit内核 -webkit-
Safari(苹果浏览器) ： WebKit内核 -webkit-
Firefox(火狐浏览器) ： Gecko内核 -moz-
Opera(欧朋浏览器) ： Presto内核 -o-
IE(IE浏览器) ： Trident内核 -ms-
下面内容几乎都需要对不同浏览器添加不同前缀。写法如下：

-webkit-transform:rotate(30deg);
  -moz-transform:rotate(30deg);
   -ms-transform:rotate(30deg);
    -o-transform:rotate(30deg);
       transform:rotate(30deg);

1.transform写法

语法
transform:函数；
属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
兼容：IE10+，Firefox16+，Chrome36+，Safari9+，Opera12.1+

2.transform 2D

2D函数

2D函数	意
rotate()	旋转
translate()	平移
scale()	缩放
skwe()	扭曲或斜切

2.1 rotate (2D旋转)

语法：

      transform:rotate(angle);

angle指旋转角度，正数顺时针旋转，负数为逆时针旋转。
度的单位 deg

2.2 translate (2D平移)

语法：

	 transform:translateX(X轴移动);/*水平*/
	 transform:translateY(Y轴移动);/*垂直*/  
	 transform:translate(X轴移动，Y轴移动);/*水平*//*垂直*/
	 transform:translate(X轴移动);/*第二个值省略，只水平移动*/

括号内只能写数值，单位可以是固定单位值也可以是相对单位值。
正值| 右，下
负值|左，上

2.3 scale (2D缩放)

语法：

	 transform:scaleX(X轴缩放);/*水平*/
	 transform:scaleY(Y轴缩放);/*垂直*/
	 transform:scale(X轴缩放，Y轴缩放);/*水平*//*垂直*/
	 transform:scale(X轴缩放);/*第二个值省略，等比缩放*/

括号内 默认值为1，值是倍数。
以父元素的中心点缩放。

2.3 skwe (2D扭曲或斜切)

语法：

	 transform:skweX(X轴角度);/*水平*/
	 transform:sskweY(Y轴角度);/*垂直*/
	 transform:skwe(X轴角度，Y轴角度);/*水平*//*垂直*/
	 transform:skwe(X轴角度);/*第二个值省略，只水平扭曲*/

括号内 默认值为角度单位（deg）
X轴正值|逆时针
X轴负值|顺时针

Y轴正值|顺时针
Y轴负值|逆时针

注意：90deg 消失 ，180deg原样显示

3.transform 3D

3D函数

3D函数	意
rotate3d()	旋转
translate3d()	平移
scale3d()	缩放

语法：

3.1 rotate3d(3D旋转)

语法：

      transform:rotateX(X轴旋转度);/*上下先转*/
      transform:rotateY(Y轴旋转度);/*左右旋转*/
      transform:rotateZ(Z轴旋转度);/*和rotate效果一样*/
      transform:rotate3d(1,1,1,45deg);

X，Y，Z 三个单独设置时写绝对即可。旋转方式是轴的旋转。
简写时，前三个值为0到1数包含0和1，最后值是角度值。每个值能省略。非零最小值0.01 ，前三个值最少两个不为零，才能使用0-1之间的数。

3.2 translate3d (3D平移)

语法：

	 transform:translateX(X轴移动);/*水平*/
	 transform:translateY(Y轴移动);/*垂直*/  
	 transform:translateZ(Z轴移动);/*前后*/
	 transform:translate3d(1px,1px,1px);/*水平，垂直，前后*/

括号内只能写数值，单位可以是固定单位值也可以是相对单位值。缩写值不能省略。
正值| 右，下，前
负值| 左，上，后

3.3 scale3d (3D缩放)

语法：

	 transform:scaleX(X轴缩放);/*水平*/
	 transform:scaleY(Y轴缩放);/*垂直*/
	 transform:scaleZ(Z轴缩放);/*垂直*/
	 transform:scale3d(5%,5%,5%);/*垂直*/
	 

括号内 默认值为1，可以用%，也可以直接写值，值是倍数。
以父元素的中心点缩放。缩写值不能省略。

4.transform-origin（坐标系统，2D，3D坐标点修改）

语法：

	transform-origin:x值 y值 z值;

里面的值可以固定值和相对值，也可以用 left，right，top，bottom

5. transform-style(嵌套元素在三维空间中呈现)

语法：

	transform-style:flat;/*默认值*/
	transform-style:preserve-3d;/*三维空间中呈现效果*/

需要写到父元素中，对儿子以外的后代无效

6. perspective (三维位置变换的元素产生透视效果)

语法：

	perspective:none;/*默认值*/
	perspective:number;/*三维空间中呈现效果*/

6. backface-visibility(元素背面是否可见)

语法：

	perspective:visible;/*可见*/
	perspective:hidden;/*不可见*/