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