本文介绍了如何使用CSS3创建一个3D旋转动画效果，通过一个彩色方块展示3D变换。博客中详细讲解了HTML结构布局和CSS样式设置，包括方块的初始倾斜、旋转动画定义以及各个面的颜色和位置。最终实现了一个在页面上自旋转的立方体，展示了CSS3D动画的魅力。
简单的CSS 3D动画效果
注：这篇博客只是我个人的学习记录，有不完善的地方，请大佬们评论区指正！！！
首先，先给大家看一下静态页面的效果图，实际上它是旋转的。这是一个彩色方块，一共有6个面。
一开始时图形会沿x轴向下倾斜30度，然后方块沿y轴顺时针旋转，并且沿x轴向上旋转。这样旋转一周，6个面都能看得到。
正式开始：
先建2个文件，文件名字随意。
先写html页面，这里我们一共需要6个面，我用 6 个 li 来完成。其余的操作都在 CSS 文件里完成。
首先我们先初始化界面，再上个背景色。（就为了有个颜色，没什么用）
其次我们给 父div 设置大小，画个红框…
定义动画，这时候它一节可以开始旋转了
接下来我们给ul 和 li 加点属性样式， li 一定要有宽高，否则后面没图形
给 li 上色和摆放位置
给第一个 li 上完色和摆好位置后是这样的
最后完色是这样的，并且自己会旋转。
3D动画做好了真的很好看，只要换上好图！！！
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
