CSS perspective 属性

CSS perspective 语法

在 CSS 中，perspective 属性用于定义 3D 变换的透视深度。

语法：

perspective: 长度值;

说明：

perspective 的取值是一个长度值，比如像素（px）、em、rem 等。

值越小（观察者越近），透视效果越强烈。元素看起来会扭曲得更厉害，近大远小的效果非常明显。
值越大（观察者越远），透视效果越弱。元素看起来会越接近没有透视的效果，更像在看一张平面的图片。

perspective 属性通常应用于父元素（或祖先元素），而不是直接应用于要进行 3D 转换的元素本身。这是因为它定义的是整个 3D 场景的观察视角，而不是单个元素的视角。所有子元素都会共享这个透视空间。

提示: 当 perspective 应用于父元素时，其透视原点默认在父元素的中心 (50% 50%)，我们可以通过 perspective-origin 属性来改变。

CSS perspective 摘要

属于	CSS3 变换
使用频率	高
是否继承	否
默认值	none
兼容性	查看
官方文档	查看
MDN	查看

CSS perspective 示例

接下来，我们通过一个简单的例子来讲解一下 CSS perspective 属性是如何使用的。

示例：perspective 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .parent {
            overflow: hidden;
            display: inline-block;
            vertical-align: top;
            width: 150px;
            height: 150px;
            border: 2px dashed #ccc;
            margin: 50px;
            perspective: 500px;    /* 父元素设置透视距离为 500px */
        }
        .child {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            border: 1px solid green;
            margin: 25px;
            font-weight: bold;
            font-size: 1.2em;
            transform: rotateY(45deg);        /* 沿 Y 轴旋转 45 度 */
            transition: transform 0.8s ease-in-out;
        }
        .child:hover {
            transform: rotateY(225deg);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">绿叶网</div>
    </div>
</body>
</html>

页面效果如下图所示。

perspective 示例

分析：

在上面例子中，我们在父容器设置了 perspective: 500px;。当方块旋转时，可以看到：离我们较近的边缘会显得更宽更大，而离我们较远的边缘会显得更窄更小。这种 “近大远小” 的效果正是 perspective 带来的 3D 深度感。

如果我们把 perspective: 500px; 删除，此时页面效果如下图所示。可以看到，如果没有设置 perspective 属性，就不再有 3D 深度感了。

不使用 perspective 的效果

此外，perspective 取值的大小不同也会有不同的效果，小伙伴们可以自行试一下。