技术分享

前端时间有在一个网站上看到css3的三维效果,感觉很棒,链接如下:
NIPPON COLORS
打开他的model开关,可以看到一个很炫的3D效果,

下面是效果截图:

NIPPON COLORS

是不是很棒...

我也觉得很好,很心动,于是就动手模仿了.

先看完成的效果吧.

来看一下几个关键的部分:
css3 3D效果,关键是下面几个属性,
首先整个模型大概是:

<div class="stage"> 
    <div class="container">
    ...要展现3d部分的内容        
            <img />
            ...
    </div>
</div>

首先要有一个舞台:stage
他有一个最重要的属性:perspective,可以理解成,观看的人,距离舞台,有多少远,比方说我这里设置了800px
接着再来一个容器:container
他也有一个重要的属性transform-style: preserve-3d; 告诉浏览器,这个容器是要显示3d效果的.
再下面就要上具体的内容了.
内容有一个重要的属性:transform
他可以设置3个关键属性rotateX, rotateY, rotateZ用来判断当前物体的旋转角度
如:transform: rotateX(180deg) rotateY(120deg) rotateZ(90deg) (X轴旋转180度,Y轴旋转120度,Z轴旋转90度)
然后现在就剩下最后一个关键属性了:translateZ
如果不设置,那么物体就在舞台中间,也就是一开始我们给舞台设置的perspective值上,如800px
数值越大,离我们就越近,当translateZ >= 800px的时候,物体就超过我们坐着的距离,就看不见他了.
数值越小,离我们就越远.
最终决定一个物体所在位置的4个值就是下面4个:
transform: rotateX(180deg) rotateY(120deg) rotateZ(90deg) translateZ(100px)

掌握上面这些,再通过css3的animation,transition两个动画神器我们就能做一点基本的小玩意啦^_^
3d是不是没有想象中的那么复杂

初探css3之3维动画效果