3D立方体旋转相册

抖音最火3D立方体旋转相册

前言
这是一个漫长的寒假，历史上从未有过如此的时刻，人们这样空前团结，这样的宅，着实如抖音所说“晚上七点，像凌晨三点”。

不过我相信黎明的曙光终将到来，逆战的脚步终将不会停止。
好了，扯得有点远了，直接上干货吧。我是才开始学习web前端技术不久，在大学之前根本不懂得什么的前端，写这篇博客的初衷就是一是回顾，二是为了避免后来人踩雷。 所以我不会像大多权威官方博客一样的copy definitely（定义），满屏概念，我只能以一个初学者的口吻来讲述一些。
实现属性说明
之前抖音火了一时的程序员3D立方体旋转相册，在这里，我就诉说一下我的实现流程，所谓3D，当然要有三维空间的概念，那就离不开X,Y,Z轴。而我们用到的属性，有这些，以下为步奏。
1，父元素宽高设为一样大小。再让父元素形成一个3D空间，给父元素加上transform-style:preserve-3d;属性，同时父元素进行定位让子元素能随父元素定位。
2，正方体有6个面，所以有6个子元素，子元素定位好了，会看到一个正方形，那是因为所有的子元素叠在一起了，此时将第一个子元素进行位移translateX(-子元素宽度的一半)，并绕Y轴旋转-90deg，rotateY（-90deg）形成正方体的左面。第二个子元素则位移translateX(子元素宽度的一半)，并进行rotateY（90deg），形成正方体的右面。第三个则位移translateY(子元素高度的一半)，并进行rotateX（-90deg），形成正方体的下面。第四个则位移translateY(-子元素高度的一半)，并进行rotateX（90deg），形成正方体的上面。第五个则 位移translateZ(-子元素宽度的一半)，并进行rotateY（180deg） ，形成正方体的后面。最后一个则位移translateZ(子元素宽度的一半)，并进行rotateY（0deg）， 形成正方体的前面。
3，最后給子元素加上背景图片，写一个旋转动画@keyframe move{from{transform:rotateX(30deg) rotateY(0deg);to{transform:rotateX(30deg) rotateY(0deg);}用animation属性给父元素加上这个动画 这个3D立方体相册大致就完成了。
代码实现：
Html部分：

css部分：

父元素旋转代码：

控制子元素旋转位移：

最后效果实现：

当然，可以再加点修饰，比如，透明，比如鼠标滑过效果，在这里就不一一叙述了，我做的在这基础上还加了个小动画，请看:
中间的小心心会跳喔，想要源码的，可以私我，送给你的小女友。 欢迎各位的欣赏，愿疫情早日彻底结束。 逆战的第27天。