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

快速提高生产力的网站：

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/

贝塞尔曲线(抛物线)

让一个物体水平和垂直运动

<!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

Css高阶用法(一) matrix

矩阵(matrix)

线性代数基础课里就有对矩阵的阐述，大致形式如下

矩阵乘法

CSS3中的矩阵 (一个方法)

2D变换矩阵

同等效果

关于旋转的推导

矩阵的应用场景

快速提高生产力的网站：

高级技巧: 一个div可以当多个div用

贝塞尔曲线(抛物线)

CSS 查询文档

相关资料