一.定义:转换是使元素改变形状.尺寸和位置的一种效果.又称为变形.
分为;2D和3D转换.2D转换只能在X.Y轴发生改变;如:平移(move).倾斜(skew).旋转(rotate).缩放(scale).
3D转换可以实现空间转换.
二.属性:
1.transform属性:应用2D或3D转换;
取值:none(默认值不进行任何转换).fransform-function(表示一个或多个转换函数:平移旋转,倾斜.缩放)
写法:(1)transform:rotate(30deg)角度为正值时顺时针旋转,负值时逆时针旋转.
(2)transform:scale(x,y)x,y的值为0~1时缩小,大于1时放大或scalex()对x轴缩放scaley()对y轴缩放可以为负值当为负值时方向变反.
(3).transform:skew(45deg)角度为正值时向左倾斜,角度为负值时向右倾斜或skewxaa()和skewy()
(4).translate(x,y)平移可取值数值,百分比,也可以是负值也可以使用单向位移函数:translateX(x),translateY(y)
2.transform-origin属性
(1).默认情况变形的原点是我们元素的中心点.
写法:transform-origin:x,y;关键字:right,top,bottom,top;%:
3.transform-style属性
(1)作用:使页面以2D/3D显示;
(2)flat:默认,平面2D;
(3).preserve-3D:元素在3D空间中展示;注意:必须在父类元素中设置;
(4).如果对一个元素设置了 transform-style的值为flat ，则该元素的所有子元素都将被平展到该元素的 2D平面中进行呈现。沿着X轴或 Y轴方向旋转该元素将导致位于正或负 Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了 transform-style的值为preserve-3d ，它表示不执行平展操作，他的所有子元素位于 3D空间中
4.3D转换
(1)perspective 属性（中文意思是：透视，视角）
perspective 属性设置镜头到元素平面的距离。所有元素都是放置在 z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是 300像素。
(2)特点：
a ，为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
b ，只影响 3D 转换元素
注意点；默认是 3D效果不明显？这是因为镜头离平面太远了，所以旋转效果不明显。试试 perspective属性。设置perspect=400px 。
(3)3D 位移主要包含
translateZ(z)
translate3d(x,y,z)
解释：对于没有 rotateX以及rotateY 的元素，translateZ的功能就是让元素在自己的眼前或近或远（结合黑板上的图）；
(4)3D 旋转主要包含
rotateX(deg)
rotateY(deg)
rotateZ(deg)
rotate3d(x,y,z,deg)
(5)3D 缩放主要包含
scaleZ(z)
scale3d(x,y,z)