perspective 3D透视简介
来源:互联网 发布:淘宝主播怎么自我介绍 编辑:程序博客网 时间:2024/04/30 17:21
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。所以要使元素有透视效果,需设置其父元素的perspective属性。
当perspective:none/0;时,相当于没有设perspective(length)。比如要建立一个小立方体,长宽高都是200px。如果perspective < 200px ,那就相当于站在盒子里面看的结果,如果perspective 非常大那就是站在非常远的地方看(立方体已经成了小正方形了)。
当元素没有设置perspective(length)时,所有后代元素被压缩在同一个二维平面上,不存在景深的效果。如果设置perspective(length)后,将会看到三维的效果。默认的透视视角中心在容器(是perspective所在的元素,不是他的后代元素)的中点,也就是perspective-origin: 50% 50%。当然你也可以自己设置,比如:左上角-webkit-perspective-origin: 0px 0px;。
当perspective:none/0;时,相当于没有设perspective(length)。比如要建立一个小立方体,长宽高都是200px。如果perspective < 200px ,那就相当于站在盒子里面看的结果,如果perspective 非常大那就是站在非常远的地方看(立方体已经成了小正方形了)。
当元素没有设置perspective(length)时,所有后代元素被压缩在同一个二维平面上,不存在景深的效果。如果设置perspective(length)后,将会看到三维的效果。默认的透视视角中心在容器(是perspective所在的元素,不是他的后代元素)的中点,也就是perspective-origin: 50% 50%。当然你也可以自己设置,比如:左上角-webkit-perspective-origin: 0px 0px;。
目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
将平面图形转换为具有透视的3D图形,该属性只能使其子元素产生3D,不对自身节点产生影响。http://www.787866.com/2083.html这里有详细的解释
0 0
- perspective 3D透视简介
- perspective(3D透视属性)属性体验
- transform-style: preserve-3d和 perspective透视
- 笔记3:透视投影变换(perspective projection)
- CSS perspective 3D rotateXYZ
- 透视变换 Perspective Transformation
- Perspective Correction(透视矫正)
- 透视投影变换-Perspective Transformation
- css3 3d转换之perspective,perspective-origin
- 透视投影(Perspective Projection)
- 透视变换(Perspective Transformation)
- 3D数学透视投影
- CSS3 3D旋转透视
- CSS3 3D – 建立一个3D场景perspective perspective-origin
- 【图像处理】透视变换 Perspective Transformation
- 【OpenCV】透视变换 Perspective Transformation(续)
- 【图像处理】透视变换 Perspective Transformation
- 【图像处理】透视变换 Perspective Transformation
- 最长公共子序列(动态规划)
- linux 内核参数优化
- SQL常用语句个人总结
- 完美解决Your Firefox profile cannot be loaded. It may be missing or inaccessible
- Stanford UFLDL教程 独立成分分析
- perspective 3D透视简介
- 电子或通信领域当前的主流技术及其社会需求调查报告
- opensuse13.2上nfs无法使用
- Stanford UFLDL教程 Exercise:Independent Component Analysis
- hibernate org.hibernate.DuplicateMappingException错误
- OpenJudge_P8782 乘积最大(DP)
- #读书心得#巧用时间读书的小方法
- 21分钟 MySQL 入门教程
- js实践