欢迎点击「算法与编程之美」↑關注我们！

本文首发于微信公众号："算法与编程之美"欢迎关注，及时了解更多此系列文章

欢迎加入团队圈子！与作者面对面！直接点擊！

一个3D立体图形在网页中呈现旋转效果，看起来十分炫酷这个过程的实现其实并不困难，只需要利用CSS3动画效果并对属性设置合适的參数之后，效果就能实现了

在解决问题之前，需要先了解CSS3的动画效果是什么其相关属性和参数有什么含义，这个过程就请查看CSS3动画的官方文档CSS3制作动画有三个属性：变形(transform)、转换(transition)和动画(animation)，本文将通过具体讲解几个属性的使用来对动画效果案例进行分析

图 2.1 立体旋转效果圖

html中只需要创建一个外部的div，来作为包裹一个立方体六面的容器然后再在每一个div中插入图片。

首先要让六张图片在视觉上呈现立体效果，需要利用CSS3的perspective属性它用来定义 3D 元素距视图的距离。

对于外部容器使用transform-style属性，设置为preserve-3d达到3D效果对 animation属性设置rotate值来实现2D的旋转。动画完荿需要的总时长为20sinfinite表示循环无限次，linear设置动画从头到尾的速度是相同的

通过opacity设置透明度，以及让元素绝对定位

在CSS中，创建动画还需偠了解@keyframes 规则from里面放的是动画开始（0%）的样式，to里面放的是动画结束（100%）的样式

在创建动画的时候，要注意每个属性值的设置有共同點也有差异，旋转方向和旋转角度的设置要通过实际呈现效果来改进同时，还要注意区分：不同属性之间的搭配使用

长按识别二维码關注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

在海外项目中为了优化用户体驗加入了几处微交互动画，实现方式是设计输出合成的雪碧图前端通过序列帧实现动画效果： 序列帧：动画效果：序列帧：

欢迎在评论區写下你对这篇文章的看法。