第五课--转换

a.2D 转换
函数                 描述
matrix(n,n,n,n,n,n)        定义 2D 转换，使用六个值的矩阵。
translate(x,y)         定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)          定义 2D 转换，沿着 X 轴移动元素。
translateY(n)          定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)             定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)              定义 2D 缩放转换，改变元素的宽度。
scaleY(n)              定义 2D 缩放转换，改变元素的高度。
rotate(angle)          定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)  定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)           定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)           定义 2D 倾斜转换，沿着 Y 轴。

b.3D转换
函数                                     描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)  定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)                         定义 3D 转化。
translateX(x)                              定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)                              定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)                              定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)                             定义 3D 缩放转换。
scaleX(x)                                  定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)                                  定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)                                  定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)                      定义 3D 旋转。
rotateX(angle)                             定义沿 X 轴的 3D 旋转。
rotateY(angle)                             定义沿 Y 轴的 3D 旋转。
rotateZ(angle)                             定义沿 Z 轴的 3D 旋转。
perspective(n)                             定义 3D 转换元素的透视视图。

    
    2D 转换


    .div1 {
        width: 300px;
        height: 300px;
        text-align: center;
        line-height: 300px;
        background-color: red;
        /*transform: rotate(30deg);*/
        /*transform: translate(50px,100px);*/
        transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    }
    .div2 {
        width: 300px;
        height: 300px;
        text-align: center;
        line-height: 300px;
        background-color: red;
        transform: rotateY(60deg);
    }



    韩淼然


    韩淼然