最近做web前端的学习比较多,深觉css3的3D效果比较强大,虽然说也练习做了一些3D效果,但都是照葫芦画瓢,囫囵吞枣,真正要轻松实现想要的3D效果,是需要深入理解的,于是,不妨花点时间来整理下这方面的知识。 要学好一样东西,最重要的是感性上的认识,这样对于我们更加深入的理解那些抽象的名称什么的会很有帮助,关于什么是3D变化,大家就自己脑补一下生活中的实例吧,看看下面这张熟悉的3维图你就明白了。 要搞懂3D transform,可按如下几步一步一步来学习
二、perspective的中文意思是:;透视,视角。
Perspective的存在与否决定了你所看到的东西是2维的还是3维的,透视的概念是比较不好理解的,可以说掌握好这个属性,以后做3维的特效就比较轻松了。 我们都知道近大远小的道理,对于没有rotateX以及rotateY的元素,translateZ的功能就是让元素在自己的眼前或近或远。比方说,我们设置元素perspective为800像素, 则其子元素,设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);translateZ值越大,该元素也会越来越大,当translateZ值非常接近800像素,但是不超过800像素的时候(如799像素),该元素的大小就会撑满整个屏幕(如果父辈元素没有类似overflow:hidden的限制的话)。因为这个时候,子元素正好移到了你的眼睛前面,所谓“一叶蔽目,不见泰山”,就是这么回事。当translateZ值再变大,超过800像素的时候,该元素看不见了——这很好理解:我们是看不见眼睛后面的东西的!
好吧,图中的效果其实不难理解。上面舞台整个作为透视元素,因此,显然,我们看到的每个子元素的形体都是不一样的;而下面,每个元素都有一个自己的视点,因此,显然,因为rotateY的角度是一样的,因此,看上去的效果也就一模一样了!
- rotateX,rotateY,rotateZ
![rotate](http://www.wyjszff.com/wp-content/uploads/2015/03/rotate-166x300.png)
三、perspective属性的两种书写
perspective属性有两种书写形式,一种用在舞台元素上(动画元素们的共同父辈元素);第二种就是用在当前动画元素上,与transform的其他属性写在一起。如下代码示例: .stage { perspective: 600px;} 以及: #stage .box { transform: perspective(600px) rotateY(45deg);} 您可以狠狠地点击这里去了解两种不同写法产生的不同的效果: 可见,如果舞台上有很多个元素,则两种书写形式的表现差异就会立马显示出来了! 您可以狠狠地点击这里去看看大神怎么做的: http://www.zhangxinxu.com/study/201209/transform-perspective-same-rotate.html (该例子应用自别人的blog)![rot](http://www.wyjszff.com/wp-content/uploads/2015/03/rot-300x241.jpg)
四、perspective-origin
perspective-origin这个属性超级好理解,表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。有时候,我们对中心的位置是不感兴趣的,希望视线放在其他一些地方。比方说: 一图胜千言,屌丝男们这个应该都懂的。 下面为立方体的实际应用透视效果图: perspective-origin: 25% 75%;![te](http://www.wyjszff.com/wp-content/uploads/2015/03/te.jpg)