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平面距离越远,视觉效果就很小