CSS3-转换之perspective
来源:互联网 发布:男生冬季服装搭配知乎 编辑:程序博客网 时间:2024/05/20 03:04
规定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平面距离越远,视觉效果就很小。为了更好的理解,我画了一张透视图,如下:
如有错误,还请道友指正,谢谢!
阅读全文
0 0
- CSS3-转换之perspective
- CSS3-转换之perspective-origin
- css3 3d转换之perspective,perspective-origin
- CSS3变形之Transform-style和Perspective等属性
- 吃透css3之3d属性--perspective和transform
- CSS3--perspective属性
- CSS3 perspective 属性
- CSS3 perspective属性
- CSS3-perspective 属性
- CSS3 perspective 属性
- css3 perspective属性介绍
- CSS3 perspective-origin
- CSS3-转换之translate
- CSS3-转换之scale
- CSS3-转换之rotate
- CSS3-转换之skew
- CSS3D之 perspective、perspective-origin属性
- CSS3特效之转换transform
- Dubbo动态改变端口配置
- 编程思想之多线程与多进程(3)——Java中的多线程
- 机器学习和深度学习面试题
- 数据结构 -- 双向链表 linkedList 手写
- c语言第三次练习题
- CSS3-转换之perspective
- VS2010下使用QT环境配置
- 好文
- 编程思想之多线程与多进程(2)——线程优先级与线程安全
- untiy去掉所有烦人的warning
- 妙用CommonException
- vue.js 定时器
- 整合Spring时Service层为什么不做全局包扫描详解
- js 中使用indexOf()方法是提示(对象不支持此属性或方法)如何解决?