Css高阶用法(一) matrix

矩阵(matrix) 线性代数基础课里就有对矩阵的阐述，大致形式如下 image.png 矩阵乘法 image.png "点积" 是把 对称的元素相乘，然后把结果加起来： (1, 2, 3) • (7, 9, 11) = 1×7 + 2×9 + 3×11 = 58 我们把第一个元素相配（1 和 7），然后相乘。第二个元素（2 和 9） 和第三个元素（3 和 11）也一样，然后把结果加起来。 CSS3中的矩阵 (一个方法) matrix() 元素2D平面的移动变换(transform) 2D变换矩阵为3*3 matrix3d() 3D变换 3D变换则是4*4的矩阵 2D变换矩阵 总共有6个可动的参数，这六个参数分别控制不同的变换 | a b 0 | | c d 0 | | tx ty 1 | a 水平缩放 b 水平拉伸 c 垂直拉伸 d 垂直缩放 tx 水平位移 ty 垂直位移 当矩阵为1的单元矩阵的时候，表明该图形没有变换 同等效果 缩放：scale(sx, sy) 等同于 matrix(sx, 0, 0, sy, 0, 0); 平移：translate(tx, ty) 等同于 matrix(1, 0, 0, 1, tx, ty); 旋转：rotate(deg) 等同于 matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0); 拉伸：skew(degx, degy) 等同于 matrix(1, tan(degy), tan(degx), 1, 0, 0); 关于旋转的推导 rotate(deg) === matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0); image.png 由(x,y)旋转到(x',y ') x' = cos(β+α)*r y' = sin(β+α)*r 已知公式： r = √x^2+y^2 和差化积公式： sin(β+α)= sin(β)cos(α) + cos(β)sin(α) cos(β+α) = cos(β)cos(α) - sin(β)sin(α) 正弦余弦 sin(α) = y/r cos(α) = x/r 所以得到 x' = cos(β+α)*r = cos(β)cos(α)r-sin(β)sin(α)*r = cos(β)x - sin(β)y y' = sin(β+α)*r = sin(β)*cos(α)*r+cos(β)sin(α)*r = sin(β)x + cos(β)y 整理出矩阵如下 |cos(β) - sin(β)| * | x | = |x'| | sin(β) cos(β) | | y | |y'| 所以 css中的矩阵表示为： matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0); 矩阵的应用场景 SVG Canvas WebGL CSS 3D 快速提高生产力的网站： https://meyerweb.com/eric/tools/matrix/ http://f2e.name/case/css3/tools.html image.png 高级技巧: 一个div可以当多个div用 image.png BFC IFC GFC FFC 1、块格式化上下文（Block Formatting Context）https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context 2、https://juejin.im/entry/5a8e32b25188257a5911d31e 3、https://segmentfault.com/a/1190000014886753 image.png http://tridiv.com/ 贝塞尔曲线(抛物线) 让一个物体水平和垂直运动 https://cubic-bezier.com/#.17,.67,.83,.67 CSS 查询文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference 相关资料 https://www.shuxuele.com/algebra/matrix-introduction.html https://www.shuxuele.com/algebra/matrix-multiplying.html https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/ https://segmentfault.com/a/1190000009036596

本文章由javascript技术分享原创和收集