css3中-webkit-perspective如何理解？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3中-webkit-perspective如何理解？相关的知识，希望对你有一定的参考价值。
设置的值是否有上限？设置为150时有明显的效果，但是设为30000时看上去和设置为0时一样……这个属性的解释是“定义 3D 元素距视图的距离”，这句话是什么意思？把什么看作视图？
这是实际上指的是成像画布距离div的距离，你可以把成像画布想象成地面，有一个div站在地面上150米距离（就是这个属性设置150的意思，不过单位不是米），然后太阳把div的影子投在地面上。离地面远和近，都会使影子在地面上的大小形状不一样。这个影子，就是最终你在电脑屏幕上看见的。这个属性没有上下限。 参考技术A 将平面图形转换为具有透视的3D图形，该属性只能使其子元素产生3D，不对自身节点产生影响。http://www.787866.com/2083.html这里有详细的解释本回答被提问者采纳 参考技术B perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许改变 3D 元素查看 3D 元素的视图。当为元素定义 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 属性。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
css3js动画特效
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .out{ width: 200px; height: 300px; -webkit-perspective:800px; margin: 0 auto; } .box{ width: 100%; height: 100%; -webkit-transform-style: preserve-3d; } img{ transition: -webkit-transform 2s ease 1s,width 1s ease 2s; -webkit-box-reflect:below 5px -webkit-gradient(linear,50% 0,50% 100%, color-stop(0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,0.1)), color-stop(0.8,rgba(0,0,0,0.4)),color-stop(1,rgba(0,0,0,0.8)) ); /*above： 指定倒影在对象的上边 below： 指定倒影在对象的下边 left： 指定倒影在对象的左边 right： 指定倒影在对象的右边 5px 定义阴影和图片的距离 */ } img:hover{ -webkit-transform:rotate3d(1,1,1,45deg); width: 300px; } </style> </head> <body> <div class="out"> <div class="box"> <img src="1.jpg" width="200px" height="200px"> </div> </div> </body> </html>
以上是关于css3中-webkit-perspective如何理解？的主要内容，如果未能解决你的问题，请参考以下文章