CSS 3.0中涉及2D和3D的关键变形属性为：transform
transform具有改变的意思，在对元素的位移、缩放、旋转中发挥重要的作用,通常在对元素进行改变时需要对元素进行定位，在父元素中设置position:relative;或者position:fixed来固定父元素，再子元素设置。
position:absolute来在父元素里面移动变形。
position属性具有定位功能，设置对象的定位。
position的属性值：
- static 默认值,元素会正常显示。
- absolute 相对于父元素的绝对定位，脱离文档流，不占据空间，当没有父元素时会以html元素来参 照。
- relative 相对与默认位置（自身的位置）的相对定位，不会破坏文档流但依然会占据原本的空间。
- fixed 相对与浏览器的绝对定位，脱离文档流但不占据空间。
- sticky 俗称粘性定位，是relaticve和fixed的结合体,当元素显示在屏幕界面时是relative，可当元素显示的位置滚动出屏幕界面时就是fixed，通俗点讲就是滚动划出屏幕时依然粘在屏幕边上。
| translate（） 水平、垂直位移 | scale（） 缩放 |
|---|---|
| rotate（） 旋转 | skew() 倾斜 |
2D功能函数（在界面中以水平X轴和垂直Y轴为参考线）
- 2D-位移 transform:translate(参数1，参数2)
参数1：位于X轴移动 参数2：位于Y轴移动 （正值：往坐标轴X右方和Y下方移动。负值：往坐标轴X轴左方和Y轴上方移动。） - 2D-缩放 transform:scale(参数1，参数2)
参数1：位于X轴缩放 参数2：位于Y轴缩放 （参数值：0-0.9999 缩小； 大于1：放大） - 2D-旋转 transform：rotate(参数1，参数2) 参数单位：deg
rotateX(参数) 元素围绕x轴以给定的度数旋转
rotateY(参数) 袁术围绕y轴以给定的度数旋转 - 2D-倾斜 transform:skew(参数1，参数2)
以元素的中心位置围绕X轴和Y轴倾斜
3D功能函数（在界面中以水平X轴和垂直Y轴为参考线，垂直于屏幕的方向多出Z轴，靠近屏幕是正值，远离屏幕是负值）
-
景深：物体和眼睛的距离越小，近大远小的效果就越明显。
第一种用法(推荐)：perspective(参数)用在父元素
第二种用法： transform:perspective(参数px)用在子元素中使用 两种方法不能一起使用不然会发生冲突，通常值在900px-1200px之间。
perspective-origin ：观察3D的角度（位置）
perspective-origin:center center;(父元素中心)
perspective-origin:right top;(右上角) perspective-origin:100% 100%;(右下角) -
transform-style属性 该属性是3D空间的重要属性，让元素在一个3D空间里面变化，有两个属性值：1.flat 为默认值，在一个2D空间展示 2.preserve-3d 表示元素在3D空间里面展示。所有3D空间定义在父元素里面形成：transform-style:preserve-3d;
-
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空间旋转的角度，正值为顺时针转动，负值为逆时针转动。 -
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像素