transform 2D变形

transform 2D变形

通过CSS转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法：translate()/rotate()/scale()/skew()/matrix()。

·none 定义不进行转换。

·translate(x,y) 定义2D平移转换。

·translateY(y) 定义转换，只是用Y轴的值。

·translateZ(z) 定义3D转换，只是用Z轴的值。

·scale(x,y) 定义2D缩放转换。

·scaleX(X) 通过设置X轴的值来定义缩放转换。

·scaleY(Y) 通过设置Y轴的值来定义缩放转换。

·rotate(angel) 定义2D旋转，在参数中规定角度。

·rotateX(angel) 定义沿着X轴的3D旋转。

·rotateY(angel) 定义沿着Y轴的3D旋转。

·skew(x-angle,y-angle) 沿着X轴和Y轴的2D倾斜转换。

·skewX(angle) 定义沿着X轴的2D倾斜转换。

·skewY(angle) 定义沿着Y轴的2D倾斜转换。

·matrix 定义使用6个值的矩阵。

·transform-origin：改变元素变形的基准点。

·像素/百分比

·X轴：left/right/center

·Y轴：top/bottom/center

如：平移：transform:translate(50px,40px);

缩放：transform:scale(0.6); //变为原来的60%

旋转：transform:rotate(45deg); //设置角度为45度，也可以是弧度，如：0.3rad

倾斜：transform:skewX(30deg);

transform:skew(30deg,45deg);

矩阵：transform:matrix(1,0,0,1,50,0);

改变基准点：transform-origin:left top;或transform-origin:0 0;或

transform-origin:30% 30%; 连用：transform:rotate(45deg);