在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()矩阵变换。