CSS3.0中2D和3D的操作运用

CSS 3.0中涉及2D和3D的关键变形属性为：transform

transform具有改变的意思，在对元素的位移、缩放、旋转中发挥重要的作用,通常在对元素进行改变时需要对元素进行定位，在父元素中设置position:relative;或者position:fixed来固定父元素，再子元素设置。

position:absolute来在父元素里面移动变形。
position属性具有定位功能，设置对象的定位。
position的属性值：

1. static 默认值,元素会正常显示。
2. absolute 相对于父元素的绝对定位，脱离文档流，不占据空间，当没有父元素时会以html元素来参 照。
3. relative 相对与默认位置（自身的位置）的相对定位，不会破坏文档流但依然会占据原本的空间。
4. fixed 相对与浏览器的绝对定位，脱离文档流但不占据空间。
5. sticky 俗称粘性定位，是relaticve和fixed的结合体,当元素显示在屏幕界面时是relative，可当元素显示的位置滚动出屏幕界面时就是fixed，通俗点讲就是滚动划出屏幕时依然粘在屏幕边上。

translate（） 水平、垂直位移	scale（） 缩放
rotate（） 旋转	skew() 倾斜

2D功能函数（在界面中以水平X轴和垂直Y轴为参考线）

1. 2D-位移 transform:translate(参数1，参数2)
   　　参数1：位于X轴移动 参数2：位于Y轴移动 （正值：往坐标轴X右方和Y下方移动。负值：往坐标轴X轴左方和Y轴上方移动。）
2. 2D-缩放 transform:scale(参数1，参数2)
   　　参数1：位于X轴缩放 参数2：位于Y轴缩放 （参数值：0-0.9999 缩小； 大于1：放大）
3. 2D-旋转 transform：rotate(参数1，参数2) 参数单位：deg
   　　rotateX(参数) 元素围绕x轴以给定的度数旋转
   　　rotateY(参数) 袁术围绕y轴以给定的度数旋转
4. 2D-倾斜 transform:skew(参数1，参数2)
   　　以元素的中心位置围绕X轴和Y轴倾斜

3D功能函数（在界面中以水平X轴和垂直Y轴为参考线，垂直于屏幕的方向多出Z轴，靠近屏幕是正值，远离屏幕是负值）

1. 景深：物体和眼睛的距离越小，近大远小的效果就越明显。
   第一种用法(推荐)：perspective(参数)用在父元素
   第二种用法： transform:perspective(参数px)用在子元素中使用 两种方法不能一起使用不然会发生冲突，通常值在900px-1200px之间。
   　perspective-origin ：观察3D的角度（位置）
   　perspective-origin:center center;(父元素中心)
   perspective-origin:right top;(右上角) perspective-origin:100% 100%;(右下角)

2. transform-style属性 该属性是3D空间的重要属性，让元素在一个3D空间里面变化，有两个属性值：1.flat 为默认值，在一个2D空间展示 2.preserve-3d 表示元素在3D空间里面展示。所有3D空间定义在父元素里面形成：transform-style:preserve-3d;

3. 3D-位移 transform:translate3d(x,y,z) x:横向坐标的位移 y:纵向坐标的位移 z:z轴向量的位移
   3D-旋转 rotate3d(x,y,z,a) rotateX(参数deg) 围绕X轴进行旋转 rotate(参数deg) 围绕Y轴进行旋转 rotate(参数deg) 围绕Z轴进行旋转
   　　 rotate3d(x,y,z,a) x：是一个0到１之间的数值，元素围绕X轴旋转的矢量值 y：是一个0到１之间的数值，元素围绕Y轴旋转的矢量值 z:是一个0到１之间的数值，元素围绕Z轴旋转的矢量值 a:是一个角度值，围绕3D空间旋转的角度，正值为顺时针转动，负值为逆时针转动。

4. 3D-缩放 scaleZ()和scale3d()两种函数 1.scaleZ() 每个元素在Z轴的缩放比例 2.scale3d(x,y,z) x:X轴缩放比例 y:Y轴缩放比例 z:Z轴缩放比例
   变形原点：也就是元素围绕该点进行运动
   transform-origin:(x,y) x:水平方向 y:垂直方向
   数值（left,center）靠左边的中心位置
   　　（10px.10px）距离左边10像素，距离上边10像素