简单的CSS 3D动画效果
注:这篇博客只是我个人的学习记录,有不完善的地方,请大佬们评论区指正!!!
首先,先给大家看一下静态页面的效果图,实际上它是旋转的。这是一个彩色方块,一共有6个面。
一开始时图形会沿x轴向下倾斜30度,然后方块沿y轴顺时针旋转,并且沿x轴向上旋转。这样旋转一周,6个面都能看得到。
正式开始:
先建2个文件,文件名字随意。
先写html页面,这里我们一共需要6个面,我用 6 个 li 来完成。其余的操作都在 CSS 文件里完成。
首先我们先初始化界面,再上个背景色。(就为了有个颜色,没什么用)
其次我们给 父div 设置大小,画个红框…
定义动画,这时候它一节可以开始旋转了
接下来我们给ul 和 li 加点属性样式, li 一定要有宽高,否则后面没图形
给 li 上色和摆放位置
给第一个 li 上完色和摆好位置后是这样的
最后完色是这样的,并且自己会旋转。
3D动画做好了真的很好看,只要换上好图!!!