矩阵(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
快速提高生产力的网站：
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
贝塞尔曲线(抛物线)
让一个物体水平和垂直运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item {
height: 100px;
width: 100px;
display: inline-block;
position: absolute;
top:50px;
left: 20px;
background: yellow;
border-radius: 50%;
animation: ver-animation 2s .5s 1;
animation-timing-function: cubic-bezier(.11, -0.46, 1, -0.06);
}
.wraper {
animation: hor-animation 2s .5s 1;
animation-timing-function: cubic-bezier(.11, -0.46, 1, -0.06);
}
@keyframes hor-animation {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(400px);
}
}
@keyframes ver-animation {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(400px);
}
}
</style>
</head>
<body>
<div class="wraper">
<div class="item"></div>
</div>
</body>
</html>
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
网友评论