CSS3制作做3D魔方效果 还可以移动哦

国际惯例 先看效果 觉得满意继续 看下去

图片演示：

 

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比较正常！