2D转换相关

 

1.CSS中Transform转换属性

transform:none; 定义不进行转换

transform：translateX(200px);根据X轴给定的参数，从当前元素位置移动。

transform：translateY(200px);根据Y轴给定的参数，从当前元素位置移动。

transform：translateZ(200px);定义3D转换，只是用Z轴的值。

transform：translate(10px，20px);定义2D平移移动

transform：translate3d(10px，20px，30px);定义3D平移移动

transform ：translateX(200px)   translateY(200px)   translateZ(200px)；

transform:rotateX(30deg);根据X轴给定的参数，从当前元素位置旋转。

transform:rotateY(30deg);根据Y轴给定的参数，从当前元素位置旋转。

transform ：scaleX(2)，通过设置 X 轴的值来定义缩放转换

transform ：scaleY(3)；通过设置 Y 轴的值来定义缩放转换。

transform ：scaleZ(2)；通过设置 Z 轴的值来定义 3D 缩放转换。

transform ：scaleX(2)   scaleY(3)  scaleZ(3)；该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放

transform ：skewX(30deg)；通过设置 X 轴的值来定义倾斜转换

transform ：skewY(30deg)；通过设置Y 轴的值来定义倾斜转换

transform ：skew(30deg,130deg)；定义2D倾斜

transform ：skewX(30deg)  skewY(130deg)  ；

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

perspective：200px；  景深   视距用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小