admin管理员组文章数量:1566356
规定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平面距离越远,视觉效果就很小。为了更好的理解,我画了一张透视图,如下:
如有错误,还请道友指正,谢谢!
本文标签: perspective
版权声明:本文标题:CSS3-转换之perspective 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1725895550a1047594.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论