稻草日志分享: css3中transform-style属性,3d动画必备属性之一3d呈现

王亚兵4个月前 (10-27)HTML5CSS399

通过几天的分享,我想大家都已经学会了我们的3d转换中的3d旋转属性,中共有四个:totateX,rotateY,rotateZ还有我们昨天分享的rotate3d。我们的3d旋转就已经告一段落了,其实在web前端开发中。如果向实现复杂的3d动画效果,有两个必备属性,一个是perspective也就是透视,另一个必备属性就是transform-style也就是3d呈现属性

通常不是对单个元素进行3d转换的。有可能会有好几个元素。一般情况下我们都会把这些元素放在一个父级元素里,所以现在思考一个问题。如果给我们的父级元素加一个3d旋转,会不会影响我们子元素的3d呈现效果。下面我给大家举个例子。我们在父级元素中放一个div。给div一个x轴3d旋转,父级元素一个y轴3d旋转会是什么效果呢?

css3中transform-style属性3d呈现

我们发现为什么父级元素旋转的时候,子元素中的3d旋转并没有呈现出3d近大远小的场面。这说明默认情况下,我们子元素中不会呈现3d效果。但是我们在web前端开发中,制作动画效果时肯定是让我们的子元素的3d效果呈现的。那么我们该怎么做呢?这就用到了我们今天的主角,transform-style也就是3d呈现属性。

这个属性有两个常用的值一个是flat也就是默认的保持平面,如果我们想让我们的子元素也有3d效果,直接使用他的另一个属性就可以了preserve-3d,这个值也就是保留3d的意思。具体该怎么用呢?如图:

我们发先transform-style并没有卸载子元素中,而是写在了父级元素上。这也是我们要注意的。也激素transform-style必须要写在父级元素里。不然是没有效果的。而且在我们的3d动画中transform-style和我们前面学习的perspective都是不可缺少的属性。

好了今天的分享到此结束,希望通过稻草日志的分享,能够真正的掌握3d呈现transform-style属性。并且知道3d动画不可缺少的属性都有哪些。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。