小炫酷的3D旋转立方体相册

小炫酷的3D旋转立方体相册

前言
今年是特别的一年，是特别宅的一年，大家都宅在家做贡献。在这个逆战时期，让我们发挥逆战精神，一起来敲代码吧！
正文
今天，我们来做一个有点小炫酷的3D旋转立方体相册。那么首先，让我们来了解一下3D。

3D（立体空间）

属性：

perspective

景深（近大远小），是观察物体的一个视角距离，距离越小效果越明显，它的数值一般为900px-1200px。
使用方法：
perspective：1200px；（在父元素中使用）
transform：perspective（1200px）；（在子元素中使用，但是我们一般不用这种方法）

transform-style

使用方法：
transform-style：preserve-3d；（让当前元素形成一个3D空间）

perspective-origin

观察3D元素的角度（位置）
使用方法：
perspective-origin： left top；
perspective-origin： center center；
perspective-origin： 50% 50%；
perspective-origin： 0px 0px；

功能函数：

translate（）3D位移

使用方法：
transform：translate3d（x,y,z）；
transform：translateX（）；（X轴上的位移）
transform：translateY（）；（Y轴上的位移）
transform：translateZ（）；（Z轴上的位移）
注意： z不能为百分比。

rotate（）3D旋转

使用方法：
transform：rotate3d（x,y,z,a）；（建议取值0或1，0不旋转，1旋转）

• x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
• y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
• z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
• a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
  transform：rotateX（）；（数值为度60deg为60度）
  transform：rotateY（）；（数值为度60deg为60度）
  transform：rotateZ（）；（数值为度60deg为60度）

scale（）3D缩放

使用方法：
transform：scale3d（x,y,z）；（缩放比例）
transform：scaleX（）；（X轴上的缩放）
transform：scaleY（）；（Y轴上的缩放）
transform：scaleZ（）；（Z轴上的缩放）
注意：
默认值为1，大于1为放大，小于1大于0为缩小；
单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。

实现：

下面是一个简单的3D旋转立方体相册

效果