CSS perspective() 函数

CSS perspective() 语法

在 CSS 中，perspective() 函数一般作为 transform 属性的值，用于为元素设置 3D 变换的透视效果。

perspective() 函数可以让我们模拟出从某个距离观察一个立体物体的视觉效果，这样让页面上的元素看起来更有 “深度感”。

语法：

transform: perspective(length);

说明：

length 表示观察者与元素所在平面（Z=0）之间的距离，它是一个带单位的长度值（如 px、rem）。透视效果的强弱由 length 值决定：

较小的值（例如 100px）会产生强烈的透视效果，元素看起来更 “近”。
较大的值（例如 1000px）会产生较弱的透视效果，元素看起来更 “远”。
值必须为正数，0 或负值无效。

对于 perspective() 函数，小伙伴们还要清楚以下几点：

erspective() 只会在使用 3D 变换函数（如 rotateX()、rotateY()、translateZ()）时生效，它对 2D 变换（如 translateX()）是无效的。
perspective() 函数与 perspective 属性功能类似。不过 perspective() 是应用于单个元素的 transform 属性。而 perspective 属性是应用于父元素，它会影响所有子元素的 3D 变换。

我们可以在一个元素上单独使用 perspective()，也可以通过父容器设置 perspective 属性来影响多个子元素的 3D 表现。例如：

/* 方法 1：使用 transform 中的 perspective() */
.box {
    transform: perspective(800px) rotateX(30deg);
}

/* 方法 2：使用父元素的 perspective 属性 */
.container {
    perspective: 800px;
}
.box {
    transform: rotateX(30deg);
}

CSS perspective() 摘要

属于	CSS3 变换
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

CSS perspective() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS perspective() 函数是如何使用的。

示例 1：perspective() 实现基本透视效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            transform: perspective(500px) rotateX(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

perspective() 基本透视效果

分析：

在这个例子中，transform: perspective(500px) rotateX(45deg) 表示为 div 元素设置 500px 的透视距离，并沿 X 轴旋转 45 度。这种透视效果可以使得元素呈现 3D 倾斜效果，顶部看起来更远。

示例 2：perspective() 结合 CSS 过渡

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            transform: perspective(300px);
            transition: transform 0.3s ease;
        }
        div:hover {
            transform: perspective(300px) rotateY(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。

perspective() 结合过渡动画 1

perspective() 结合过渡动画 2

分析：

在这个例子中，我们使用了 transition 属性实现一个过渡效果。当鼠标移动到 div 元素上时，div 元素会平滑地沿 Y 轴旋转 45 度，并保持 300px 的透视距离。

示例 3：perspective() 动态调整透视效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            transform: perspective(800px) rotateX(30deg);
        }
        @media (max-width: 1200px) {
            div {
                transform: perspective(400px) rotateX(30deg);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

perspective() 动态透视调整

分析：

transform: perspective(800px) rotateX(30deg) 表示为 div 元素设置 800px 透视距离和 30° 的 X 轴旋转。这里我们使用了 CSS 媒体查询，使得当屏幕宽度小于 1200px 时，透视距离调整为 400px，从而增强 3D 效果的深度感。