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(矩阵计算)相关函数
-
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矩阵的详细内容可以参见 //www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩阵/ -
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(透视深度)相关函数
-
perspective(l)l:<length>, 表示透视深度, 在值为正数时生效
Rotate(旋转)相关函数
-
rotate3d(x, y, z, a)x,y,z,a:<angle>, 横坐标, 纵坐标, Z坐标 和 顺时针旋转的角度 -
rotate(a)a:<angle>, 表示顺时针旋转的角度 -
rotateX(a)a:<angle>, 表示横坐标旋转的角度 -
rotateY(a)a:<angle>, 表示纵坐标旋转的角度 -
rotateZ(a)a:<angle>, 表示Z坐标旋转的角度
Scale(缩放)相关函数
-
scale3d(sx, sy, sz)sx,sy,sz:<percentage>, 在X轴, Y轴, Z轴上的缩放大小.参数取值为
1时不进行缩放处理, 在[0~1]区间按比例缩小, 在[>1]时按比例放大.参数取负值时元素将沿原点中心翻转.
-
scale(sx, [sy])sx,sy(可选):<percentage>, 在X轴, Y轴上的缩放大小. -
scaleX(s)s:<percentage>, 在X轴上的缩放大小. -
scaleY(s)s:<percentage>, 在Y轴上的缩放大小. -
scaleZ(s)s:<percentage>, 在Z轴上的缩放大小.
Skew(倾斜)相关函数
-
skew(ax, [ay])ax,ay(可选):<angle>, 元素沿X轴和Y轴倾斜的角度 -
skewX(a)a:<angle>, 元素沿X轴倾斜的角度 -
skewY(a)a:<angle>, 元素沿Y轴倾斜的角度
Translate(平移)相关函数
备注: translate 是一个CSS属性, 可以单独使用, 用法与函数一致.
-
translate3d(tx, ty, tz)tx,ty,tz:<length>, 元素沿X轴,Y轴和Z轴平移的距离. -
translate(tx, [ty])tx,ty(可选):<length>, 元素沿X轴和Y轴平移的距离. -
translateX(t)t:<length>, 元素沿X轴平移的距离. -
translateY(t)t:<length>, 元素沿Y轴平移的距离. -
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中文文档 //developer.mozilla.org/zh-CN/docs/Web/CSS/transform
MDN 英文文档 //developer.mozilla.org/en-US/docs/Web/CSS/transform
transform-origin属性介绍 //developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
->> Version History
现在版本为V1.0, 下一版预计添加两处(函数和transform-origin) flight.Playground 以便互动式理解
详见 Github(@flightmakers)
2021.8.17 在掘金发布V0.1
2021.8.18 补全内容. 发布V1.0
