10.13 如何使用transform样式？

如何使用transform样式？

matrix3D是3D变换，是4*4的矩阵。matrix是2D变换，是3*3矩阵。

该样式允许我们旋转，缩放，倾斜或平移给定元素，它是通过修改CSS视觉格式化模型的坐标空间来实现的。

旋转

rotate

    transform: translate(50%,50%) rotate(50deg);

缩放

scale

倾斜

skew

平移

translate

示例

transform: translate(50%,50%) skew(45deg,10deg);

matrix

斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)。

中心点

改变中心点的样式：

    transform-origin: left bottom;

matrix转换关系图

matrix平移

transform: matrix(1, 0, 0, 1, 30, 30);
/* a=1, b=0, c=0, d=1, e=30, f=30 */

相当于

transform: matrix(1, 0, 0, 1, 30, 30);
transform: translate(30px,30px)

matrix缩放

matrix(s, 0, 0, s, 0, 0);

套用转换关系公式，有：

x' = ax+cy+e = s*x+0*y+0 = s*x;

y' = bx+dy+f = 0*x+s*y+0 = s*y;

所以matrix(sx, 0, 0, sy, 0, 0);，等同于scale(sx, sy);

【关于作者】

李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。

参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。