【零基础学习web前端】CSS3-2D变换（matrix()、rotateX()、rotateY()方法）

Amy

【零基础学习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>

效果



rotateX()方法
rotateX()方法以给定的度数围绕其X轴旋转元素。

[CSS] 纯文本查看 复制代码

div{
    width: 100px;
    height: 50px;
    background-color: #2f65ff;
    border: 1px solid black;
}
.box{
    -webkit-transform: rotateX(130deg);
    transform: rotateX(130deg);
}

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

<div>
        苏飞论坛
    </div>
    <div class="box">
        苏飞论坛
    </div>

效果

rotateY()方法
rotateY()方法以给定的度数围绕其Y轴旋转元素。

[CSS] 纯文本查看 复制代码

div{
    width: 100px;
    height: 50px;
    background-color: #2f65ff;
    border: 1px solid black;
}
.box{
    -webkit-transform: rotateY(130deg);
    transform: rotateY(130deg);
}

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

<div>
        苏飞论坛
    </div>
    <div class="box">
        苏飞论坛
    </div>

效果

站长苏飞

我只是路过打酱油的。

liu

强烈支持楼主ing……