admin管理员组文章数量:1530516
CSS 3D transforms的出现已经有好几年的历史了,但是由于缺乏浏览器的广泛支持,它一直没有得到广泛的应用。这个系列教程旨在让更多的童鞋了解和使用CSS 3D transforms。
要将一个元素制作成3D立体效果,需要在元素上使用perspective(透视)。可以有两种方式为元素添加perspective:使用transform属性,将perspective作为一个功能函数来使用:
transform: perspective( 600px );
或者直接使用perspective属性:
perspective: 600px;
注意:在教程的代码中我们没有使用浏览器厂商的前缀,例如perspective。在实际应用中,你应该添加上前缀:-webkit-perspective、-moz-perspective等等。
查看 Perspective Demo1
以上的两种书写格式都会生成一个3D立体效果,但是它们之间有一些区别。使用功能函数的方式可以很方便的在单个元素上应用3D transform,但是当在多个元素上使用时,转换的元素不会得到预期的效果。如果你为不同的元素使用相同的transform,每一个元素都会有自己的消失点。为了解决这个问题,可以在父元素上使用perspective属性,这样,所有的子元素都可以共享同一个3D空间。
查看 Perspective Demo2
perspective的值决定3D效果的强度。可以想象为一个观察者到某个物体的距离,perspective的值越大,观察者于物之间的距离越远,反之则越近。设置perspective: 2000px;时会产生一种缩小的3D效果,就好像我们通过望远镜看一个很远的物体。设置为perspective: 100px;时会产生一个放大的3D效果,就像一个人在近处观察一座大山。
默认情况下,消失点是放置在3D空间的中心点位置,你可以通过perspective-origin属性来改变消失点的位置。
perspective-origin: 25% 75%;
查看 Perspective Demo3
perspective属性可以制作非常有意思的3D立方体效果,来看看这个超炫效果:纯CSS3超酷3D旋转立方体动画特效。
CSS3 3D transforms系列教程:
本文标签: 教程系列perspectivecss
版权声明:本文标题:css3 3d perspective,CSS 3D transforms系列教程-Perspective 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1725894259a1047439.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论