3D 照片墙

今天又看了直播课，原生js做的照片墙，主要使用的transtion和transfrom，感觉还是很考验的个人对于css的理解，至于js部分还是比较见到的，就使用了一个拖拽的功能。

拖拽原理：
距离不变，三个事件：
onmousedown存储距离，onmousemove根据距离计算div最新位置、onmouseup取消拖拽。

这个是一个简单的div的拖拽，HTML部分和css部分都没有什么，一个div，然后给div添加大小颜色什么的。

这个是3D照片墙的css部分


这是js部分


其实js部分不能，就是各个部分的距离之间，还有过去距离，原来距离和现在移动位置，这些位置部分比较绕，其实理解了之后还是很简单的，个人觉得这次直播课css部分的难度比js的难。

至于HTML部分没有什么，就是添加了11个li标签，然后在最后的位置添加了一个p，来确定中心点位置。