html+css制作3D旋转正方体特效

制作方法：

html部分：

•  连接css
• 定义大盒子放入想要的图片（此处我直接在放入图片时直接定义了图片的大小，并不规范）

css部分：

首先设置盒子的属性，其中transform-style:preserve-3d则是将盒子定义为3d形式，用于制作正方体,而animation:rotateAnimate 10s linear infinite;则是与以下部分相对应，用于创建动画同时设置动画执行一次的时长。

在设置动画之前还要将插入的图片的位置设置成为一个正方体，此时需要对每张图片设置不同的角度，代码如下：

 经过如此设置以后，插入的图片就可以成为一个正方体，在结合上面的动画设置就可以达到正方体不停旋转的效果。

最后，还可以在此基础上增加鼠标移入正方体打开的功能，代码如下：

（在设置过程中一定要注意hover后面的空格！！！！）