今天在抖音刷到了一个旋转相册挺好玩的，就试着写了一下我只是一个菜鸟，勿喷另外，演示站请PC端食用移动端不能拖拽（很卡）

工具：DW/Editplus等等都行、一部电脑/云電脑、有电、一堆图片
由于这是写着玩的，我就没按套路搞了(不喜欢看的源码在最下面)

OK！步入正题，这里只讲代码不讲萌新教程（重點都标出来了）
新建站点：名字自取，创建img文件夹存放图片新建HTML文件

第一步：配置好景深（设置div盒子体现出景深）
首先设置一个盒子，甴于是要体现景深的盒子我就取名为perspective

做完这些，效果是这样的：

tips：什么是场景景深场景景深就类似于一个视角问题。

然后给wrap元素赋予3D屬性：

然后我们需要计算图片入场动画时所需要旋转的度数这个我们就交给JavaScript（HTML是从上执行到下的，所以这个放在最后 ）
1.求出图片旋转的單位度数 360/图片的个数

然后说一下特效是什么
特效：JS控制元素节点 在指定的时间点改变元素的样式或者属性的值 算法 逻辑思维

接下来就很麻烦了，我也说不清就不细说了（其实是懒）：

 每一次移动 移动了多少距离 每次鼠标的位置在哪里
 每两次 是 哪两次移动了
 距离 添加到原囿的元素度数上
 移动距离差 = 新的移动距离 - 旧的移动距离

那么新值是从哪来的呢？
③第一次点击的值（很明显点击内）：

④保存新值，计算差值给给出旋转速度（移动内）：
` //保存新的鼠标位置的值

重要的差不多就是上面那些了（对了，舞台颜色用文本渲染这些是没有写慣性的，如果需要自行百度当然，源码我有也会放出来），下面放出上面的总代码：

` /*1.求出图片旋转的单位度数 360/图片的个数
2.针对每一张圖片旋转相对应的度数
4.拖拽元素 分开处理事件 点击 移动 松开

 每一次移动 移动了多少距离 每次鼠标的位置在哪里
 每两次 是 哪两次移动了
 距离 添加到原有的元素度数上
 移动距离差 = 新的移动距离 - 旧的移动距离

 //保存新的鼠标位置的值

3D旋转相册css+js（拖拽惯性版）：
3D旋转相册（无惯性）：
3D旋转相册（自动旋转）：

今天在抖音刷到了一个旋转相册挺好玩的，就试着写了一下我只是一个菜鸟，勿喷另外，演示站请PC端食用移动端不能拖拽（很卡）

工具：DW/Editplus等等都行、一部电脑/云電脑、有电、一堆图片
由于这是写着玩的，我就没按套路搞了(不喜欢看的源码在最下面)

OK！步入正题，这里只讲代码不讲萌新教程（重點都标出来了）
新建站点：名字自取，创建img文件夹存放图片新建HTML文件

第一步：配置好景深（设置div盒子体现出景深）
首先设置一个盒子，甴于是要体现景深的盒子我就取名为perspective

做完这些，效果是这样的：

tips：什么是场景景深场景景深就类似于一个视角问题。

然后给wrap元素赋予3D屬性：

然后我们需要计算图片入场动画时所需要旋转的度数这个我们就交给JavaScript（HTML是从上执行到下的，所以这个放在最后 ）
1.求出图片旋转的單位度数 360/图片的个数

然后说一下特效是什么
特效：JS控制元素节点 在指定的时间点改变元素的样式或者属性的值 算法 逻辑思维

接下来就很麻烦了，我也说不清就不细说了（其实是懒）：

 每一次移动 移动了多少距离 每次鼠标的位置在哪里
 每两次 是 哪两次移动了
 距离 添加到原囿的元素度数上
 移动距离差 = 新的移动距离 - 旧的移动距离

那么新值是从哪来的呢？
③第一次点击的值（很明显点击内）：

④保存新值，计算差值给给出旋转速度（移动内）：
` //保存新的鼠标位置的值

重要的差不多就是上面那些了（对了，舞台颜色用文本渲染这些是没有写慣性的，如果需要自行百度当然，源码我有也会放出来），下面放出上面的总代码：

` /*1.求出图片旋转的单位度数 360/图片的个数
2.针对每一张圖片旋转相对应的度数
4.拖拽元素 分开处理事件 点击 移动 松开

 每一次移动 移动了多少距离 每次鼠标的位置在哪里
 每两次 是 哪两次移动了
 距离 添加到原有的元素度数上
 移动距离差 = 新的移动距离 - 旧的移动距离

 //保存新的鼠标位置的值

3D旋转相册css+js（拖拽惯性版）：
3D旋转相册（无惯性）：
3D旋转相册（自动旋转）：