国际惯例 先看效果 觉得满意继续 看下去
图片演示：
demo演示：
http://demo.tolotolo.cn/etanaluBox/ 想看源码的 你懂的怎么做
首先请学基本功 我推荐 张鑫旭 偶像的这篇 好吧，CSS3 3D transform变换，不过如此！
看完基本攻后 你估计会一半了 剩下的理清思路就行
如果你不想看 知道css3属性 transform-style: preserve-3d 和 translateZ rotateX rotateY 就行
下面考你的问题
transform: rotateY(90deg) translateZ(-150px);
transform: translateZ(-150px) rotateY(90deg) ;
效果会一样吗？
嗯 完全一样 那么这是正常模式 但如果上了父元素上了preserve-3d 你在看看
这个就相当 css设计者 是先+然后再X 还是先X后+
这个坑我爬了很久 自己多多做点例子 就可以掌握了
会了这个你在看我的源码就没问题啦 剩下的就是js的拖拽原理了
还有点记住移动端用e.touches[0].pageX pc端用 e.pageX 取坐标
最后/2 我个人理解是降低灵敏度 2比较正常！