本文介绍了CSS3的三维变形功能，如何通过`-webkit-transform-style:preserve-3d`告知浏览器并实现真正的三维动画效果，以及如何避免对position:fixed定位元素的影响。开发技巧包括在层级结构中应用三维变形以达到预期效果。
茅侃侃
CSS3除了为开发者提供二维变形之外，还将动画从二维平面推动到了三维立体状态，能够实现真正的三维特效。三维变形和二维变形一样，均使用的是transform属性。想要触发三维变形有两种方式：一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”，另一种方式是直接使用CSS3三维变形的语法。触发方法1：告知浏览器变形方式1-webkit-transform-style:preserve-3d;Tips：IE不支持三维变形，在移动端，绝大多数的浏览器均为WebKit内核，因此，在此句代码之前需要书写-webkit-的前缀内核。Tips：不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中，如果当前元素属于body的子级元素，又希望应用三维变形，则在body和当前元素之间多嵌套一层结构，并为这层元素应用三维变形即可。触发方法2：直接使用CSS3变形语法123456789101112131415161718192021222324nbsp;html>
言成科技/title>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
