CSS3 2D转换&3D转换

最新推荐文章于 2024-08-04 22:32:07 发布

江浙沪柯蓝

最新推荐文章于 2024-08-04 22:32:07 发布

阅读量3.6k

点赞数 1

文章标签： css3 2d 3d

本文链接：https://blog.csdn.net/zhaobw831/article/details/50533179

版权

1、transform属性方法

Transform 方法

2、2D转换

translate()方法

        .div1 {
            width: 100px;
            height: 100px;
            background: #00ff21;
            transform: translate(100px,100px);
            -ms-transform: translate(100px,100px); /* IE 9 */
            -webkit-transform: translate(100px,100px); /* Safari and Chrome */
            -o-transform: translate(100px,100px); /* Opera */
            -moz-transform: translate(100px,100px); /* Firefox */
        }

效果：

rotate()方法

        .div2 {
            width:100px;
            height:50px;
            background:#ff6a00;
            transform:rotate(45deg);
        }

效果：

scale()方法

        .div3 {
            margin-left:100px;
            margin-top:100px;
            background:#00ff90;
            transform:scale(2,4);/*width扩大两倍，height扩大4倍*/
        }

效果

skew()方法

        .div4 {
            transform:skew(35deg,10deg);/*X轴翻转35度，Y轴翻转10度*/
        }

效果：

matrix()方法

参考：
理解CSS3 transform中的Matrix(矩阵)

3、3D转换

        div {
            width:200px;
            height:150px;
            background-color:#ff0000;
            float:left;
            color:#ffffff;
        }
        .div1 {
            background-color:#00ff00;
            transform:rotateX(180deg);/*围绕X轴旋转*/
        }
        .div2 {
            background-color:#0000ff;
            transform:rotateY(180deg);/*围绕Y轴旋转*/
        }