CSS布局--transform应用（矩形旋转、缩放、倾斜、滚动、3D转换）代码

最新推荐文章于 2025-05-27 16:38:22 发布

原创最新推荐文章于 2025-05-27 16:38:22 发布 · 6.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css

XHTML 同时被 2 个专栏收录

10 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

本文介绍了CSS中用于改变元素布局的transform属性，包括translate()实现平移、rotate()实现旋转、scale()实现缩放、skew()实现倾斜以及matrix()实现复合变换。此外，还探讨了3D转换如rotateX()和rotateY()的应用，通过实例展示了如何使用这些属性改变元素的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body, div {
            margin:0;
            padding:0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            margin-left: 50px;
            border: 1px solid red;
            display: inline-block;/*不换行，但是可以设置width跟height*/
        }
        /*
            translate(tx, ty)
            该函数设置html组件横向移动tx距离，纵向移动ty距离。如果ty省略那么，默认是0。
            translate(tx) -> translateX(tx)
            translate(ty) -> translateY(ty)
        */
        .translate-original {}
        .translate-now {
            -webkit-transform: translate(10px, 10px);
        }
        /*
            rotate(angle)单位是deg
            该函数设置html组件顺时针旋转angle角度
        */
        .rotate-now {
            -webkit-transform: rotate(30deg);
        }
        /*
            scale(sx, sy);
            该函数设置设置HTML组件上横向缩放比为sx，纵向缩放比为sy，如果只写一个参数，sy省略，默认是sy==sx。
            scaleX(sx)
            scaleY(sy)
        */
        .scale-now {
            -webkit-transform: scale(1.5, 0.5);
        }
        .scale-now2 {
            -webkit-transform: scale(0.5, 1.5);
        }
        /*
            skew(sx, sy)
            该函数设置html组件沿着x轴倾斜sx角度，沿着y轴倾斜sy角度，如果只写一个参数，sy默认是0。
            skewX(sx) skewY(sy)
        */
        .skew-now {
            -webkit-transform: skew(45deg, 0deg);
        }
        .skew-now2 {
            -webkit-transform: skewY(45deg);
        }
        /*复合*/
        .component {
            -webkit-transform: skewY(45deg) scale(1.5, 0.5);
        }
        /*指定中心点*/
        .center {
            -webkit-transform: skewY(45deg);
            -webkit-transform-origin: left top;
        }
        /*
            matrix(m11, m12, m21, m22, dx, dy);
            矩阵变换函数，前四个参数将组成变形矩阵，dx和dy负责将坐标进行平移。
            每个坐标点由(dx, dy)变为(x*m11 + y*m21 + dx, x*m12 + y*m22 + dy);
            eg -> matix(1.5, 0, 0, 1, 0, 0);
                        (x*1.5 + y*0 + 0, x*0 + y*1 + 0);
                        (1.5x, y)
        */
        .matrix {
            -webkit-transform: matrix(1.5, 0, 0, 1, 0, 0);
        }
        /*
            rotateX(angle)，3D转换，沿着X轴转动
            rotateY(angle)，3D转换，沿着Y轴转动
        */
        .rotateX {
            -webkit-transform: rotateX(70deg);
        }
        .rotateY {
            -webkit-transform: rotateY(70deg);
        }
    </style>
</head>
<body>
    <div>文字</div>
    没有变动
    <div>文字</div>
    <hr/>
    <div>文字</div>
    移动10px 10px
    <div class="translate-now">文字</div>
    <hr/>
    <div>文字</div>
    旋转30度
    <div class="rotate-now">文字</div>
    <hr/>
    <div>文字</div>
    缩放1.5, 0.5
    <div class="scale-now">文字</div>
    <hr/>
    <div>文字</div>
    缩放0.5, 1.5
    <div class="scale-now2">文字</div>
    <hr/>
    <div>文字</div>
    x轴倾斜45度
    <div class="skew-now">文字</div>
    <hr/>
    <div>文字</div>
    y轴倾斜45度
    <div class="skew-now2">文字</div>
    <hr/>
    <div>文字</div>
    y轴倾斜45度 并且缩放1.5，0.5
    <div class="component">文字</div>
    <hr style="margin-top: 50px"/>
    <div>文字</div>
    y轴倾斜45度 中心为left top
    <div class="center">文字</div>
    <hr style="margin-top: 120px"/>
    <div>文字</div>
    矩阵的参数为1.5, 0, 0, 1, 0, 0
    <div class="matrix">文字</div>
    <hr style="margin-top: 120px"/>
    <div>文字</div>
    沿着x轴滚动70deg
    <div class="rotateX">文字</div>
    <hr style="margin-top: 120px"/>
    <div>文字</div>
    沿着y轴滚动70deg
    <div class="rotateY">文字</div>
</body>
</html>