重拾CSS，前端样式精读-函数（变换-transform）

前言

本文收录于CSS系列文章中，欢迎阅读指正

CSS的变换属性（transform）通过修改视觉格式化模型的坐标空间可以实现给定标签的旋转，缩放，倾斜或平移效果。transform通常会和动画属性搭配，实现标签的缓动变化效果，本篇文章可能会比之前的文章有意思，感兴趣的话就接着往下看吧。

参照元素

为了观察元素的3d效果，我们需要实现一个正方体

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>CSS变换函数</title>
    <style>
        ul {
            list-style: none;
        }

        .box {
            transform-style: preserve-3d;
            margin: 0px auto 150px;
            height: 300px;
            width: 300px;
            perspective: 1000px;
            transition: 1s;
        }

        .box li {
            display: block;
            position: absolute;
            width: 200px;
            height: 200px;
            border: none;
            line-height: 200px;
            font-size: 60px;
            color: white;
            text-align: center;
        }

        .front {
            background: rgba(0, 0, 0, .5);
            transform: translateZ(100px);
        }

        .back {
            background: rgba(0, 255, 0, .5);
            color: black;
            transform: rotateY(180deg) translateZ(100px);
        }

        .right {
            background: rgba(196, 0, 0, .5);
            transform: rotateY(90deg) translateZ(100px);
        }

        .left {
            background: rgba(0, 0, 196, .5);
            transform: rotateY(-90deg) translateZ(100px);
        }

        .top {
            background: rgba(196, 196, 0, .5);
            transform: rotateX(90deg) translateZ(100px);
        }

        .bottom {
            background: rgba(196, 0, 196, .5);
            transform: rotateX(-90deg) translateZ(100px);
        }

        .default {
            perspective: 1000px;
        }
    </style>
</head>

<body>
    <ul id="box" class="box default">
        <li class="front">1</li>
        <li class="back">2</li>
        <li class="right">3</li>
        <li class="left">4</li>
        <li class="top">5</li>
        <li class="bottom">6</li>
    </ul>
</body>

</html>

后续将围绕这个正方体进行变换操作

创建3D场景及视角

Z轴的一些操作不会在2D屏幕上显示任何变化，添加一个容器更换视角看的更直观

<section class="out-box">
    <ul id="box" class="box default">
        <li class="front">1</li>
        <li class="back">2</li>
        <li class="right">3</li>
        <li class="left">4</li>
        <li class="top">5</li>
        <li class="bottom">6</li>
    </ul>
</section>

.out-box {
    background: linear-gradient(lightblue, lightgreen);
    perspective: 1200px;
    perspective-origin: 20% 20%;
    padding-top: 150px;
}

perspective

定义一个3D元素的视角。传入一个参数：perspective(“>)其中的length定义了视图和Z平面之间的距离。它影响3D转换元素的视觉深度，仿佛是从用户的视点观察。一般情况下它与transform属性一起用。perspective有两种写法，直接使用perspective属性定义距离，和充当perspective函数在transform中定义，前者不会被transform其他属性覆盖，后者一般配合其他transform函数一起使用

.perspective {
    /* perspective: 300px; */
    transform: perspective(300px);
}

rotate

旋转元素。传入一个参数：rotate(“>)其中的 angle是旋转角度，以度数 (deg)、弧度 (rad) 或圈 (turn) 为单位。一个正值表示顺时针旋转，而一个负值表示逆时针旋转。此旋转仅限于2d视角

.rotate {
    transform: rotate(90deg);
    /* 相当于rotateZ(90deg) */
}

rotate3d

围绕一个由3D坐标定义的轴旋转元素。传入四个参数：rotate3d(rx, ry, rz,“>) 其中rx, ry, rz定义旋转轴的方向，而“>是旋转的角度。

.rotate3d {
    transform: rotate3d(1, 1, 1, 45deg);
}

当rx, ry, rz的值不在-1到1区间

说个题外话，关于rx, ry, rz规范化转换原理有以下概念：这三个分量通常是介于-1到1之间的数值，如果(rx, ry, rz)不是单位向量，也就是说它们的平方和的平方根不等于1，那么CSS会将其规范化为单位向量。来说说这个规范化操作，标准化操作是一个数学过程：将原向量的每一个分量除以向量的长度（根号下(rx^2+ry^2+rz^2)）

transform: rotate3d(2, 1, 1, 45deg);

当我们输入上述向量值时，浏览器会先求它的长度（高中向量中的模）这里是根号(2^2+1^2+1^2)

等于根号6，然后再使用2,1,1分别除以根号6

求向量长度最后可以得到上述代码实际上约等于

transform: rotate3d(0.8165, 0.4082, 0.4082, 45deg);

rotateX

围绕X轴旋转元素。传入一个参数：rotateX(“>)其中的“>是围绕X轴的旋转角度。rotateX(a)相当于rotate3d(1, 0, 0, a)

.rotateX {
    transform: rotateX(45deg);
}

rotateY

围绕Y轴旋转元素。传入一个参数：rotateY(“>)其中的“>是围绕Y轴的旋转角度。rotateY(a) 相当于rotate3d(0, 1, 0, a)

.rotateY {
    transform: rotateY(45deg);
}

rotateZ

围绕Z轴旋转元素。传入一个参数：rotateZ(“>)其中的“>是围绕Z轴的旋转角度。rotateZ(a)相当于rotate(a)或者rotate3d(0, 0, 1, a)

.rotateZ {
    transform: rotateZ(45deg);
}

scale

缩放元素。传入一个或两个参数：scale(sx[, sy])；x和y类型是“>，其中sx定义水平方向的缩放因子，sy定义垂直方向的缩放因子。如果省略sy，则sy的值默认与sx相同。

.scale {
    transform: scale(2);
    /* 双倍大小 */
}

scale3d

在3D空间中缩放元素。传入三个参数：scale3d(sx, sy, sz)，参数类型同scale，其中sx、sy、和sz分别定义沿着X轴、Y轴和Z轴的缩放因子。

.scale3d {
    transform: scale3d(0.5, 2, 3);
}

scaleX

只在X轴上缩放元素。传入一个参数：scaleX(sx) 其中sx是水平方向的缩放因子，参数类型同scale，scaleX(sx)等同于scale(sx, 1)或scale3d(sx, 1, 1)

.scaleX {
    transform: scaleX(0.5);
    /* 宽度缩小到原来的一半 */
}

scaleY

只在Y轴上缩放元素。传入一个参数：scaleY(sy)，其中sy是垂直方向的缩放因子。参数类型同scale，scaleY(sy)等于scale(1, sy)或scale3d(1, sy, 1)

.scaleY {
    transform: scaleY(2);
    /* 高度放大到原来的两倍 */
}

scaleZ

只在Z轴上缩放元素。传入一个参数：scaleZ(sz)其中sz是深度方向的缩放因子。参数类型同scale，scaleZ(sz)相当于scale3d(1, 1, sz)

.scaleZ {
    transform: scaleZ(3);
}

skew

倾斜元素。传入一个或两个参数：skew(ax[, ay]) 其中ax是水平方向的倾斜角度，ay是垂直方向的倾斜角度，参数类型都是“>。如果省略ay，其值默认为0。

.skew {
    transform: skew(30deg, 20deg);
}

skewX

只在X轴方向倾斜元素。传入一个参数：skewX(ax)其中ax是水平方向的倾斜角度，参数类型同skew，skewX(a)相当于skew(a)

.skewX {
    transform: skewX(30deg);
}

skewY

只在Y轴方向倾斜元素。传入一个参数：skewY(ay)其中ay是垂直方向的倾斜角度，参数类型同skew。

.skewY {
    transform: skewY(20deg);
}

translate

移动元素位置。传入一个或两个参数：translate(tx[, ty])其中tx是水平方向的移动值，ty是垂直方向的移动值，参数类型是“>或者“>。如果省略ty，其值默认为0。

.translate {
    transform: translate(50px, 100px);
    /* 向右移动50px，向下移动100px */
}

translate3d

在3D空间中移动元素位置。传入三个参数：translate3d(tx, ty, tz)，参数类型同translate，其中tx、ty、和tz分别定义了沿着X轴、Y轴和Z轴的移动值。

.translate3d {
    transform: translate3d(50px, -100px, -200px);
}

translateX

只在X轴方向移动元素位置。传入一个参数：translateX(tx)其中tx是水平方向的移动值，类型同translate。translateX(tx)等同于translate(tx, 0)或者translate3d(tx, 0, 0)。

.translateX {
    transform: translateX(100px);
    /* 向右移动100px */
}

translateY

只在Y轴方向移动元素位置。传入一个参数：translateY(ty)其中ty是垂直方向的移动值，类型同translate。translateY(ty)对应translate(0,ty)或translate3d(0,ty,0)。

.translateY {
    transform: translateY(150px);
    /* 向下移动150px */
}

translateZ

在Z轴方向上移动元素位置。传入一个参数：translateZ(tz),其中tz是深度方向的移动值，类型同translate。translateZ(tz)等于translate3d(0, 0, tz)

.translateZ {
    transform: translateZ(300px);
}

matrix

应用2D转换矩阵到元素。该转换不透明且可以执行任何线性变换。传入六个参数：matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)，参数类型是“>。一个matrix变换能够组合多个转换效果，如旋转、缩放、倾斜等。下面代码表示：元素在水平和垂直方向上缩小到原来的一半尺寸，并且会稍微倾斜，同时会向左上方都移动100像素。

.matrix {
    transform: matrix(.5, .1, .3, .5, -100, -100);
}

matrix3d

matrix3d()以4x4齐次矩阵的形式定义一个3D转换。传入十六个参数：matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)，类型为“>。其支持执行如旋转、缩放、倾斜、平移等任意的线性变换以及透视变换。每个值可以是长度单位或无单位的数字，这些值通过矩阵乘法作用于元素的每一个顶点（假设此元素为一个3D立体），从而实现三维空间内的转换。

下面的代码表示元素无任何变化的参数

transform: matrix3d(1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1);

以下参数实现perspective、rotateX、rotateY、rotateZ、scaleX、scaleY、scaleZ、translateX、translateY、和 translateZ的复合变换效果

transform: matrix3d(0.866, 0.5, 0, 0,
        -0.5, 0.866, 0, 0,
        0, 0, 1.5, 0,
        100, 200, 50, 1);

由于matrix3d()使用门槛较高，需要一定的线代知识，这里不多赘述。参考matrix3d() - CSS：层叠样式表 | MDN

总结

本文详细介绍了transform函数的用法及说明，通过transform函数可以进行元素变换的属性，它可以包含多个变换函数，按照顺序逐一应用于元素。这些函数包括平移(translate、translateX、translateY、translate3d)、缩放(scale、scaleX、scaleY、scale3d)、旋转(rotate、rotateX、rotateY、rotateZ、rotate3d)、倾斜(skew、skewX、skewY)、以及透视(perspective)等。通过适当组合这些函数，可以实现各种二维和三维的变换效果。

以上就是文章全部内容，感谢你看到了最后，如果觉得本篇文章或者这个系列写的不错，还望三连支持一下，你的支持就是我创作的动力，谢谢！

参考

transform - CSS：层叠样式表 | MDN

使用 CSS 变换 - CSS：层叠样式表 | MDN

transform-function - CSS：层叠样式表 | MDN

CSS精读系列文章 > CSS

#前端 #css #3d

重拾CSS，前端样式精读-函数（变换-transform）

http://website.diehunter1024.work/2024/08/13/重拾CSS，前端样式精读-函数（变换-transform）/

作者

阿宇的编程之旅

发布于

2024年8月13日

许可协议

设计开发一个data-table 上一篇

重拾CSS，前端样式精读-函数（滤镜）下一篇

重拾CSS，前端样式精读-函数（变换-transform）

前言

参照元素

创建3D场景及视角

perspective

rotate

rotate3d

当rx, ry, rz的值不在-1到1区间

rotateX

rotateY

rotateZ

scale

scale3d

scaleX

scaleY

scaleZ

skew

skewX

skewY

translate

translate3d

translateX

translateY

translateZ

matrix

matrix3d

总结

相关代码

参考