17站长网 网站首页 编程教程 CSS3教程 查看内容

perspective 透视

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. 实例

  1. 增加一个 500px 的透视效果

<div class="demo">
	<div class="cell"></div>
</div>
.demo{
	perspective: px;
	background: #f2f2f2;
}
.cell{
	width: px;
	height: px;
	background: #000;
	transform: translate@H_301_204@d(px,-px,-px) @H_301_204@rotateY(deg);
}

效果图:

编程之家

无透视


编程之家

有透视效果图

解释:加了 500px 的透视效果。

  1. 修改观察点的位置为 50% 50% 。

.demo{
	perspective: px;
	background: #f2f2f2;
	perspective-origin: ;
}
.cell{
	width: px;
	height: px;
	background: #000;
	transform: translate@H_301_204@d(px,-px,-px) @H_301_204@rotateY(deg);
}

效果图:

编程之家

设置透视的 x 轴和 y 轴。

6. 经验分享

perspective-origin 通常使用 % 代表在观察父元素,观察点的坐标。

7. 小结

  1. 推荐设置 none 而不是 0 ,内部的子元素不会透视。

  2. 该属性的作用范围是针对子元素让其具有透视效果。

  3. 不可以使用 % 数作为透视距离。

返回顶部