CSS perspective-origin 属性

CSS perspective-origin 语法

在 CSS 中，perspective-origin 属性用于设置 3D 透视效果中 “视角的位置”，也就是观察者从哪个点看向元素。这决定了 3D 元素在透视变形时的消失点位置。

语法：

perspective-origin: 值;

说明：

perspective-origin 的取值可以是 1 个值，也可以是 2 个值。

当 perspective-origin 的取值为 1 个值时：

如果是一个数值：此时该值表示 “X 轴” 的位置，而 “Y 轴” 使用默认值 50%（即 center）例如 perspective-origin: 50px; 等价于 perspective-origin: 50px 50px;。
如果是一个关键字：它会根据上下文被解析为 X 或 Y 轴的值。其中，left、right、center 用于 X 轴，而 top、bottom、center 用于 Y 轴。例如 perspective-origin: top; 等价于 perspective-origin: center top;

当 perspective-origin 的取值为 2 个值时：

第一个值表示 X 轴的消失点：可以是 left、center、right 关键字，或者是一个数值。
第二个值表示 Y 轴的消失点：可以是 top、center、bottom 关键字，或者是一个数值。

perspective-origin 取值情况
写法	说明
perspective-origin: center center;	默认值，观察点在元素正中心
perspective-origin: right top;	观察点在右上角
perspective-origin: 30% 80%;	观察点在宽度的 30%、高度的 80% 处
perspective-origin: 100px;	等价于 perspective-origin: 100px 100px;

对于 perspective-origin 属性，小伙伴们要注意以下几点。

perspective-origin 是在 “父元素” 设置的，用于定义其子元素在 3D 转换时的透视视角。
perspective-origin 属性不会直接影响元素的位置或大小，但会显著改变子元素的 3D 变形效果和透视方向。
perspective-origin 的百分比值是相对于设置了 perspective 的元素的宽度和高度来计算的。例如，50% 50% 总是该元素的中心。

注意: perspective-origin 必须和 perspective 一起使用，否则不会生效。

CSS perspective-origin 摘要

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

CSS perspective-origin 示例

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

示例：perspective-origin 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .parent {
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
            width: 200px;
            height: 150px;
            border: 2px dashed #ccc;
            margin: 50px;
            perspective: 400px;
            perspective-origin: left center;    /* 透视原点在左边中心 */
            background-color: #f8f8f8;
        }
        .child {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            border: 1px solid green;
            margin: 25px auto;
            font-weight: bold;
            font-size: 1.2em;
            transform: rotateY(45deg);
            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-origin 示例

分析：

在上面例子中，我们给父元素设置了 perspective-origin: left center;。当子元素旋转时，你会发现它的透视效果看起来像是从左边观察，导致右侧的扭曲或收缩更加明显。这创造了一种从侧面看 3D 元素的错觉。

如果我们将 perspective-origin: left center; 改为 perspective-origin: center top;，此时页面效果如下图所示。当 box 元素沿 X 轴旋转时，你会发现它的透视效果看起来像是从上方观察，底部边缘的收缩或扭曲更加明显。

perspective-origin: center top;