前端小练习:案例4.3D图片旋转展示(旋转木马)

一.效果预览图

二.实现思路 

1.实现旋转木马效果的第一步是先准备好自己需要的图片,创建html文件

2.旋转木马的实现,关键点在3D形变和关键帧动画。

3.步骤,定义一个div使其居中,,把图片放进div盒子里,因为图片需要3D形变,所以要给div设置3D环境,给图片设置定位或者使用弹性布局使其在相对的位置,要控制图片一定要在div中,否则关键帧动画旋转的时候整体会是倾斜的,根据图片的数量,合理控制图像的旋转角度,(通常使用 360度/图片数量=需要旋转的角度),最后设置z轴的移动距离和关键帧动画。

三.相关代码 




    
    
    Document
    


    

你可能感兴趣的:(css案例,前端,3d)