一、transform平移
1.transform:none;定义不进行转换
2.transfrom:translate(200px);平移,默认x轴,单位是%的话,指的是自己
3.transfrom:translateX(200px);根据x轴参数,从当前元素位置移动
transfrom:translateY(200px);根据y轴参数,从当前位置移动
transfrom:translateZ(200px);根据Z轴参数,从当前位置移动
4.transfrom:translate(10px,20px);2D平移
5.transfrom:translate(10px,20px,30px);3D平移
6.transfrom:transfromX(200px) translateY(200px) translateZ(200px);
二、transform旋转
1.transfrom:rotate(30deg);默认Z轴旋转
2.transform:rotateX(30deg);根据X轴给定参数,从当前元素位置旋转
3.transform:rotateY(30deg);根据Y轴给定参数,从当前元素位置旋转
4.transform:rotateZ(30deg);根据Z轴给定参数,从当前元素位置旋转
5.transform:rotateX(30deg) rotateY(30deg) rotateZ(30deg);
三、transform缩放
transform:scale(2);默认X和Y同时缩放,默认值是1
1.transform:scaleX(2);通过设置X轴的值来定义缩放转换
2.transform:scaleY(3);通过设置Y轴的值来定义缩放转换
3.transform:scaleZ(2);通过设置Z轴的值来定义缩放转换
4.transform:scale(2,5); 定义2D缩放
5.transform:scale3d(2,3,4) 定义3D缩放
6.transform:scaleX(2) scaleY(3) scaleZ(3);
该元素取负值会先让元素进行翻转(顺时针180deg),然后再进行缩放。
四、transform倾斜(倾斜没有Y轴)
1.transform:skewX(30deg);通过X轴的值定义倾斜转换
2.transform:skewY(30deg);通过Y轴的值来定义倾斜转换
3.transform:skew(30deg,130deg);定义2D倾斜
4.transform:skewX(30deg) skewY(30deg);
五、transform:matrix();矩阵
1.transform:matrix(n,n,n,n,n,n)定义2D转换,使用六个值的矩阵
2.transform:matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3D转换,使用16个值的4*4矩阵。
六、改变元素基点transform-origin(默认点是元素的中心点)
1.transform-origin(X,Y);设置元素运动的基点,X、Y的值可以是百分值,em,pm,其中X也可设置字符值left,center,right。Y可以设置字符值top,center,bottom。
2.transform-origin(X,Y,Z);Z轴的设置只能是数值
七、3D相关属性
1.transform-style:flat/preserve-3d;
flat值默认在2D平面呈现,preserve-3d在3D空间中呈现(transform-style需要设置在父元素中,并且高于任何嵌套的变形元素)
2.prespective:200px;景深 视距
用来设置用户和元素3D空间Z平面之间的距离,值越小,用户与3D空间Z平面距离越近,视觉效果越好;值越大,用户与3D空间Z平面距离越远,视觉效果越小。
3.perspective-origin(源点角度)