苏飞论坛

标题: 【零基础学习web前端】CSS3-2D变换（matrix()、rotateX()、rotateY()方法） [打印本页]
作者: Amy    时间: 2018-12-8 18:41
标题: 【零基础学习web前端】CSS3-2D变换（matrix()、rotateX()、rotateY()方法）
【零基础学习web前端】CSS3-2D变换（matrix()、rotateX()、rotateY()方法）


【零基础学习web前端】教程目录导航
http://www.sufeinet.com/thread-24027-1-1.html


matrix()方法
矩阵方法采用六个参数，包含数学函数，它允许您：旋转，缩放，移动（平移）和偏斜元素。
[CSS] 纯文本查看 复制代码
div{

    width: 100px;

    height: 50px;

    background-color: #2f65ff;

    border: 1px solid black;

}

.box{

    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);/* IE 9 */

    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */

    transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Standard syntax */

}

[HTML] 纯文本查看 复制代码
<div>

        苏飞论坛

    </div>

    <div class="box">

        苏飞论坛

    </div>

效果
(, 下载次数: 181)