关于transform的2D

时间:2021-06-28 13:46:56

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

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

一、2D变换:  (x为水平,y为垂直)

1、skew(斜拉)

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

A.示例图:(注!本例中的基准点是左上角,只为方便对比查看)

关于transform的2D

2、scale(缩放)

  • 根据给定的宽度(X 轴)和高度(Y 轴);
  • scale(x) 或者 scale(x,y), 一个参数时,第二个参数默认与第一个值相等;

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

B.示例图:

关于transform的2D

3、rotate(旋转) 

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

C.示例图:

关于transform的2D

4、translate(位移)

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

D.示例图:

关于transform的2D

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