perspective 透视
透视距离和透视位置可以更好地观察拥有 3D 的元素。
perspective 定义 3D 元素距视图的距离,以像素计算。该允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 时,其子元素会获得透视,而不是元素本身。
perspective-origin 定义 3D 元素所基于的 X 轴和 Y 轴。该允许您改变 3D 元素的位置。
当为元素定义 perspective-origin 时,其子元素会获得透视,而不是元素本身。
通过在父级元素设置这两个,可以简单的理解为设置观察者的位置,也就是我们的眼睛 perspective 的大小代表眼睛距离元素的位置。
perspective-origin,代表眼睛所在的坐标点,我们可以设置 x 轴和 y 轴,这两个其实就间接的组成了 (x,y,z)空间坐标组,要注意的是,这是设置都是在父元素上进行的。
div
{
perspective: px;
perspective-origin: ,;
}
目前浏览器都 perspective 。
Chrome 和 Safari 替代的 -webkit-perspective 。
<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 的透视。
.demo{
perspective: px;
background: #f2f2f2;
perspective-origin: ;
}
.cell{
width: px;
height: px;
background: #000;
transform: translated(px,-px,-px) rotateY(deg);
}
图:
perspective-origin
通常使用 %
代表在观察父元素,观察点的坐标。