制作方法:
html部分:
- 连接css
- 定义大盒子放入想要的图片(此处我直接在放入图片时直接定义了图片的大小,并不规范)
css部分:
首先设置盒子的属性,其中transform-style:preserve-3d则是将盒子定义为3d形式,用于制作正方体,而animation:rotateAnimate 10s linear infinite;则是与以下部分相对应,用于创建动画同时设置动画执行一次的时长。
在设置动画之前还要将插入的图片的位置设置成为一个正方体,此时需要对每张图片设置不同的角度,代码如下:
经过如此设置以后,插入的图片就可以成为一个正方体,在结合上面的动画设置就可以达到正方体不停旋转的效果。
最后,还可以在此基础上增加鼠标移入正方体打开的功能,代码如下:
(在设置过程中一定要注意hover后面的空格!!!!)