CSS与数学的奥秘-形态变化和Matrix

[hubvue]

transform

transform可以定义盒子的形态变化。主要有一下变化

1. translate：定义盒子的位置变化（移动）。

div{
    width:100px;
    height:100px;
    background-color:red;
    /*向X轴正向移动200px*/
    transform:translateX(200px);
}

2. scale：定义盒子的缩放变化。

div{
    width:100px;
    height:100px;
    background-color:red;
    /*缩放2倍*/
    transform:scale(2);
}

3. rotate：定义盒子的旋转变化。

div{
    width:100px;
    height:100px;
    background-color:red;
    /*向Z轴方向旋转45度*/
    transform:rotateZ(45deg);
}

4. skew：定义盒子的倾斜变化。

div{
    width:100px;
    height:100px;
    background-color:red;
    /*向X轴方向倾斜45度*/
    transform:skew(45deg);
}

transform-style

transform-style定义了变换是什么类型的变换，当值为preserve-3d的时候，图形的变换就变成了3D变换

div{
    width:100px;
    height:100px;
    background-color:red;
    transform-style:preserve-3d;
}

prespective

prespective是景深的意思，同样也叫做视距，表示用户视觉到物理的距离，达到视觉上3D的效果。

可以通过perspective-origin改变视距的方向

div{
    /*值的书写*/
    /*
    x-position
        指定消失点的横坐标，其值有以下形式：
        <percentage> 百分比，相对于元素宽度，可为负值。
        <length> 长度值，可为负值。
        left，关键字，0值的简记。
        center，关键字，50%的简记。
        right，关键字，100%的简记。
    y-position
        指定消失点的纵坐标，其值有以下形式：
        <percentage> 百分比，相对于元素的高度，可为负值。
        <length> 长度值，可为负值。
        top，关键字，0值得简记。
        center，关键字，50%的简记。
        bottom，关键字，100%的简记。
    
    */
}

Matrix

在数学中，矩阵（Matrix）是一个按照长方阵列排列的复数或实数集合，最早来自于方程组的系数及常数所构成的方阵。矩阵是高等代数学中的常见工具，也常见于统计分析等应用数学学科中。在物理学中，矩阵于电路学、力学、光学和量子物理中都有应用；计算机科学中，三维动画制作也需要用到矩阵。矩阵的运算是数值分析领域的重要问题。由 m × n 个数aij排成的m行n列的数表称为m行n列的矩阵，简称m ×n矩阵。这m×n个数称为矩阵A的元素，简称为元。