3D旋转带倒影相册

利用CSS3以及一些简单的JS逻辑，实现一个可拖拽的3D拖拽旋转带倒影相册

      相册的 逻辑部分是基于Jquery实现的，先看一下效果图，出生动画为卷帘式， 可以对相册进行3D无死角拖拽旋转😆。
      图片来自网络， 别当真…🥺

• 主要用到的 CSS3 属性

    /* 景深 */
    perspective: 800px;		
    /* 径向渐变 */
    background: -webkit-radial-gradient(center center, 800px 800px, rgba(244, 34, 0, 0.3), rgba(0, 0, 0, 1));
    /* 3D场景 */
    transform-style: preserve-3d;
    /* 元素动画 */
    transform: rotateX(-15deg) rotateY(0deg);
    /*倒影:朝向 偏移  遮盖  */
    -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
  

• 主要用到的 javascript 逻辑

      页面资源加载完毕初始化图片的旋转终点、相对屏幕的高度，设置每张图片的动画延迟，达到一种卷帘式展开的效果。
      涉及事件：鼠标按下、移动、抬起，通过获取鼠标按下及抬起两种状态下坐标的差值，计算相应的旋转角度。
      惯性移动：鼠标抬起事件，可以添加一个延时器，自定义惯性系数，让旋转角度不断减小，一定范围时清除，达到类似惯性运动的效果。

代码部分：

• CSS样式

<style>
    /* 清除默认内外边距 */
    * {
   
      margin: 0;
      padding: 0;
    }

    /* 背景 */
    html,
    body {
   
      height: 100%;
      width: 100%;
      /* 径向渐变 */
      background: -webkit-radial-gradient(center center, 800px 800px, rgba(244, 34, 0, 0.3), rgba(0, 0, 0, 1));
      overflow: hidden;
    }
    .container {
   
      /* 景深 */
      perspective: 800px;
    }
    /* 图片盒子 */
    .imgBox {
   
      width: 120px;
      height: 180px;
      position: relative;
      margin: 220px auto 0;
      /* 3D场景 */
      transform-style: preserve-3d;
      /* 元素动画 */
      transform: rotateX(-15deg) rotateY(0deg);
    }

    /* 图片样式 */
    .imgBox img {
   
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      border: 2px solid #97FFFF;
      box-shadow: 0 0 5px #F0E68C;
      /* 初始化旋转角度 */
      transform: