perspective 透视

发布时间：2023-03-18 13:58:44 所属栏目：教程来源：

导读：perspective 透视
透视距离和透视位置可以更好地观察拥有 3D 效果的元素。

1. 官方解释
perspective 属性定义 3D 元素距视图的距离，以像素计算。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义

perspective 透视
透视距离和透视位置可以更好地观察拥有 3D 效果的元素。

1. 官方解释
perspective 属性定义 3D 元素距视图的距离，以像素计算。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

2. 解释
通过在父级元素设置这两个属性，可以简单的理解为设置一个观察者的位置，也就是我们的眼睛 perspective 的大小代表眼睛距离元素的位置。

perspective-origin，代表眼睛所在的坐标点，我们可以设置 x 轴和 y 轴，这两个属性其实就间接的组成了（x,y,z）空间坐标组，要注意的是，这是设置都是在父元素上进行的。

3. 语法
div
{
   perspective: px;
   perspective-origin: ,;
}
4. 兼容性
目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

5. 实例
增加一个 500px 的透视效果
<div class="demo">
   <div class="cell"></div>
</div>
.demo{
   perspective: px;
   background: #f2f2f2;
}
.cell{
   width: px;
   height: px;
   background: #000;
   transform: translated(px,-px,-px) rotateY(deg);
}
有透视效果图
解释：加了 500px 的透视效果。

修改观察点的位置为 50% 50% 。
.demo{
   perspective: px;
   background: #f2f2f2;
   perspective-origin: ;
}
.cell{
   width: px;
   height: px;
   background: #000;
   transform: translated(px,-px,-px) rotateY(deg);
}
设置透视的 x 轴和 y 轴。
6. 经验分享
perspective-origin 通常使用 % 代表在观察父元素，观察点的坐标。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!