旋转木马思路
框架:
应用:
标题:
舞台:
容器:
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吧