关于transform的2D

在transform的学习中，自己总结了一点经验。

　　我们知道transform有2D和3D的两大类变换，这里分享下关于2D的属性简单示例；

一、2D变换：  (x为水平，y为垂直)

1、skew(斜拉)      

• 它的值是以角度表示，单位deg；以原点为基准，围绕 X 轴和 Y 轴按照一定的角度倾斜；
• 可能会改变元素的形状；
• 斜拉可以写成skew(x轴的夹角，y轴的夹角)，或者skewX(xdeg),skewY(ydeg)。

A.示例图：（注！本例中的基准点是左上角，只为方便对比查看）

2、scale(缩放)

• 根据给定的宽度（X 轴）和高度（Y 轴）；

• scale(x) 或者 scale(x,y)， 一个参数时，第二个参数默认与第一个值相等；

• 取值0~1；
• 还可以是scaleX(x)和scaleY(y)；

 

B.示例图：

 

3、rotate(旋转)　

• 根据原点，将元素按照顺时针旋转给定的角度
• 允许负值，元素将逆时针旋转

C.示例图：

 

4、translate(位移)

• 将元素从其当前位置移动
• 移动到 x 坐标和 y 坐标位置参数
• 取值数值、百分比，也可以是负值

• translateX(x)，translateY(y)

D.示例图：

对于transform的2D简单介绍就是这样了。下次，我们看看2D里更高阶的matrix()矩阵变换。