Css3 3d应用场景大赏

框架：

                            应用:
                                    标题：
                                    舞台：
                                        容器：
                                            img1:
                                            img2:
                                            img3:
                                            img4:
                                            img5:
                                            img6:
                                    思路：
                        

基本介绍：

                            图片长宽为200 * 200 px
                            将perspective(视点)设置800px距离 保证舞台的合适距离。
                        

技术实现：

1. 3d图像设置：

                            将容器transform-style: preserve-3d;自不必多说。
                            容器设置为position: relative;
                            设置图片为position: absolute; 让每张图片都公用一个中心点。
                            显然,旋转木马旋转木马，自然是围着钢管(Y轴)旋转，所以我们只需控制rotateY便可。
                            因为一个周期为360°，我们有6张图片，正好等分，所以将每张图片都设置transform: rotateY( n*60deg );
                            但为了让每张图片都看清楚，而不是挤在一起，就需要用到我们的translateZ,声明它的元素可以让其向它的正前方移动或者后退。
                            我们便设置它让图片向显示器走来(设置合适大小即可)。
                        

2. 动画设置：

                            由于有6张图片，设置关键帧每1/6处进行一次动画transform: rotateY( n*60deg );
                            最后对app容器应用动画：
                            /* 以下设置依次为：设置动画名，设置动画时常为6s， 设置贝塞尔曲线为缓入快出，设置一直进行动画 */
                            animation-name: name; 
                            animation-duration: 6s;
                            animation-timing-function: ease-in-out;
                            animation-iteration-count: infinite;
                        

源码：Github，如果觉得对您有帮助请点个star吧