淘先锋技术网

首页 1 2 3 4 5 6 7
最近做web前端的学习比较多,深觉css3的3D效果比较强大,虽然说也练习做了一些3D效果,但都是照葫芦画瓢,囫囵吞枣,真正要轻松实现想要的3D效果,是需要深入理解的,于是,不妨花点时间来整理下这方面的知识。 要学好一样东西,最重要的是感性上的认识,这样对于我们更加深入的理解那些抽象的名称什么的会很有帮助,关于什么是3D变化,大家就自己脑补一下生活中的实例吧,看看下面这张熟悉的3维图你就明白了。   要搞懂3D transform,可按如下几步一步一步来学习
  • rotateX,rotateY,rotateZ
3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) rotateZ( angle ) rotate旋转的意思,rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴。 如下图所示旋转效果:  rotate   二、perspective的中文意思是:;透视,视角。  Perspective的存在与否决定了你所看到的东西是2维的还是3维的,透视的概念是比较不好理解的,可以说掌握好这个属性,以后做3维的特效就比较轻松了。 我们都知道近大远小的道理,对于没有rotateX以及rotateY的元素,translateZ的功能就是让元素在自己的眼前或近或远。比方说,我们设置元素perspective为800像素, 则其子元素,设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);translateZ值越大,该元素也会越来越大,当translateZ值非常接近800像素,但是不超过800像素的时候(如799像素),该元素的大小就会撑满整个屏幕(如果父辈元素没有类似overflow:hidden的限制的话)。因为这个时候,子元素正好移到了你的眼睛前面,所谓“一叶蔽目,不见泰山”,就是这么回事。当translateZ值再变大,超过800像素的时候,该元素看不见了——这很好理解:我们是看不见眼睛后面的东西的!

三、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  好吧,图中的效果其实不难理解。上面舞台整个作为透视元素,因此,显然,我们看到的每个子元素的形体都是不一样的;而下面,每个元素都有一个自己的视点,因此,显然,因为rotateY的角度是一样的,因此,看上去的效果也就一模一样了!

四、perspective-origin

perspective-origin这个属性超级好理解,表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。有时候,我们对中心的位置是不感兴趣的,希望视线放在其他一些地方。比方说: 一图胜千言,屌丝男们这个应该都懂的。 下面为立方体的实际应用透视效果图: perspective-origin: 25% 75%;  te

八、transform-style: preserve-3d

transform-style属性也是3D效果中经常使用的,其两个参数,flat|preserve-3d. 前者flat为默认值,表示平面的;后者preserve-3d表示3D透视。 preserve-3d符合我们真实世界的思维认识。 因此,基本上,我们想要根据现实经验实现一些3D效果的时候,transform-style: preserve-3d是少不了的。一般而言,该声明应用在3D变换的兄弟元素们的父元素上。

九、backface-visibility

在显示世界中,我们无法穿过软妹A看到其身后的软妹B或C或D;但是,在CSS3的3D世界中,默认情况下,我们是可以看到背后的元素 因此,为了切合实际,我们常常会这样设置,使后面元素不可见。