一直想做一个立体的盒子,前段时间刚好看见掘金上有位朋友发了篇关于
3d
盒子的文章,看了决定自己做一下,再写一些和盒子互动的操作。这里是最终的效果,这里是github地址,可以直接查看代码,上边还有别的有趣的demo,欢迎来访。
首先看下怎么做一个静止的盒子,用到了css3
的transform
。将盒子六个面放在一个div
里,将这个div
定位好,用transform
属性改变不同的面的朝向,再将其向前移动盒子宽度的一半,盒子就做好了。html
结构如下:
|
|
设置css,不熟悉transform
可以看下下边这张图,需要注意的是元素的轴是跟着元素转动而转动的,所以几个面的translateZ
属性的值都是一样的,旋转到正确的朝向然后向前平移盒子一半的宽度。
|
|
下来就是鼠标拖动盒子的核心代码了,先理一下思路,鼠标拖动盒子,就是记录下盒子的角度,然后点击鼠标并拖动的时候根据鼠标移动方向和距离重新计算出盒子的旋转角度,鼠标松开时取消监听,记录盒子角度。这和我之前写的一个例子鼠标拖动div 有点相似:
|
|
再加一个使用滚轮改变景深的函数,因为景深太小视角会到盒子里边,并不是很好看,所以限制了一下,在景深小于300px
时将不会减小。
|
|
好了,到这里这个盒子看起来已经很3D
了,你可以直接在github上复制代码查看效果,我多加了一个入场动画,喜欢可以顺手点个star
。有什么建议或问题可以在博客下方留言,欢迎探讨,共同学习。