CSS3-转换之perspective

规定3D元素的透视效果。定义3D元素距视图的距离,以像素计。该属性允许改变3D元素查看3D元素的视图。
默认值:none。
继承性:yes。
JavaScript语法:object.style.perspective=500.

注:perspective属性只影响3D转换元素。

可取的值有:
number - 元素距离视图的距离,以像素计;
none - 默认值,与0相同,不设置透视

资料显示浏览器均不支持perspective属性,chrome和Safari支持替代的-webkit-perspective属性。但是经测试,结果如下:
1、IE10+支持perspective属性,并且也支持替代属性-ms-perspective;
2、Firefox优先支持perspective、-moz-perspective、-webkit-perspective属性;
3、Safari仅支持-webkit-perspective属性;
4、Chrome支持perspective、-webkit-perspective属性。

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

理解:
perspective会设置查看者的位置,并将可视内容映射到一个视锥上,继而投到一个2D视平面上,如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面上,并且变换结果中将不存在景深概念。
其实对于perspective属性,可以简单的理解为视距,用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定,值越小,用户与3D空间Z平面距离越近,视觉效果更令人印象深刻;反之,值越大,用户与3D空间Z平面距离越远,视觉效果就很小。为了更好的理解,我画了一张透视图,如下:

这里写图片描述

如有错误,还请道友指正,谢谢!

相关文章
相关标签/搜索