CSS Transform完全指南 #flight.Archives007

Title/ CSS Transform完全指南 #flight.Archives007

序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步!

简介: 一篇最简约高效的CSS Transform教程.

Tag/ Transform介绍

CSS的 transform 可以让元素产生变形效果,比如旋转,缩放,倾斜或平移

element {
    transform: scale(0.5) translate(10px, 10px); /*`transform` 支持同时指定多个函数.*/
}

上面代码中 element 会缩放一半大小, 同时向右和向下各平移 10px.

接下来逐一介绍现支持的所有 Transform 函数.

Tag/ Transform 函数介绍

Matrix(矩阵计算)相关函数

1. matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

   这个函数涉及高等数学知识, 矩阵变换, 使用非常复杂 ,随后介绍的rotate, scale, skew, translate 函数都是基于这个 matrix 函数实现的

   但是在实战中直接使用这个函数的情况不大, 多数是间接使用基于该方法实现的函数, 所以本文不详细介绍该方法.

   就像Canvas中的 webgl, 在实战中一般都是使用基于 webgl 实现的JS库, 如 three.js

   关于 matrix矩阵 的详细内容可以参见 https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩阵/

2. matrix(a, b, c, d, tx, ty)

   这个函数是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写形式.

Perspective(透视深度)相关函数

1. perspective(l)

   l: <length>, 表示透视深度, 在值为正数时生效

Rotate(旋转)相关函数

1. rotate3d(x, y, z, a)

   x,y,z,a: <angle>, 横坐标, 纵坐标, Z坐标 和 顺时针旋转的角度

2. rotate(a)

   a: <angle>, 表示顺时针旋转的角度

3. rotateX(a)

   a: <angle>, 表示横坐标旋转的角度

4. rotateY(a)

   a: <angle>, 表示纵坐标旋转的角度

5. rotateZ(a)

   a: <angle>, 表示Z坐标旋转的角度

Scale(缩放)相关函数

1. scale3d(sx, sy, sz)

   sx, sy, sz: <percentage>, 在X轴, Y轴, Z轴上的缩放大小.

   参数取值为 1 时不进行缩放处理, 在 [0~1] 区间按比例缩小, 在 [>1] 时按比例放大.

   参数取负值时元素将沿原点中心翻转.

2. scale(sx, [sy])

   sx, sy(可选): <percentage>, 在X轴, Y轴上的缩放大小.

3. scaleX(s)

   s: <percentage>, 在X轴上的缩放大小.

4. scaleY(s)

   s: <percentage>, 在Y轴上的缩放大小.

5. scaleZ(s)

   s: <percentage>, 在Z轴上的缩放大小.

Skew(倾斜)相关函数

1. skew(ax, [ay])

   ax, ay(可选): <angle>, 元素沿X轴和Y轴倾斜的角度

2. skewX(a)

   a: <angle>, 元素沿X轴倾斜的角度

3. skewY(a)

   a: <angle>, 元素沿Y轴倾斜的角度

Translate(平移)相关函数

备注: translate 是一个CSS属性, 可以单独使用, 用法与函数一致.

1. translate3d(tx, ty, tz)

   tx, ty, tz: <length>, 元素沿X轴,Y轴和Z轴平移的距离.

2. translate(tx, [ty])

   tx, ty(可选): <length>, 元素沿X轴和Y轴平移的距离.

3. translateX(t)

   t: <length>, 元素沿X轴平移的距离.

4. translateY(t)

   t: <length>, 元素沿Y轴平移的距离.

5. translateZ(t)

   t: <length>, 元素沿Z轴平移的距离.

Tag/ transform-origin 属性介绍

transform-origin 属性可以更改元素变形的原点, 默认值为 center

可取值:

transform-origin: 2px; /*如果只有一个值, 则表示原点的横坐标*/
transform-origin: 2px 2em; /*如果有两个值, 则分别表示原点的横坐标和纵坐标*/
transform-origin: left top; /*可以使用关键字: left, center, right, top 或 bottom*/
transform-origin: top right; /*如果两个值都是关键字, 则可以先纵坐标, 后横坐标*/
transform-origin: 20px left; /*这是错误的表示. 如果关键字和长度单位同时使用, 不可以都表示纵坐标或横坐标*/
transform-origin: 2px 10% 20px; /*如果有三个值, 则前两个值用法不变, 第三个值表示原点的深度(Z坐标)*/

->> Reference link

MDN中文文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

MDN 英文文档 https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transform-origin属性介绍 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

CSS-Tricks https://css-tricks.com/almanac/properties/t/transform/

->> Version History

现在版本为V1.0, 下一版预计添加两处(函数和transform-origin) flight.Playground 以便互动式理解

详见 Github(@flightmakers)

2021.8.17 在掘金发布V0.1

2021.8.18 补全内容. 发布V1.0