可拖拽的3D盒子

亦凉 2022-05-30 04:20 233阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/11453.html][http_www.demodashi.com_demo_11453.html]
> 
>   一直想做一个立体的盒子，前段时间刚好看见掘金上有位朋友发了篇关于`3d`盒子的文章，看了决定自己做一下，再写一些和盒子互动的操作。

## 一、程序实现 ##

首先看下怎么做一个静止的盒子，用到了`css3`的`transform`。将盒子六个面放在一个`div`里，将这个`div`定位好，用`transform`属性改变不同的面的朝向，再将其向前移动盒子宽度的一半，盒子就做好了。`html`结构如下：

<div class="wraper">
            <div class="cube">
                <div class="front">Front</div>
                <div class="end">End</div>
                <div class="left">Left</div>
                <div class="right">Right</div>
                <div class="top">Top</div>
                <div class="bottom">Bottom</div>
            </div>
        </div>

设置css，不熟悉`transform`可以看下下边这张图，需要注意的是**元素的轴是跟着元素转动而转动的**，所以几个面的`translateZ`属性的值都是一样的，旋转到正确的朝向然后向前平移盒子一半的宽度。

![3d\_axes.png][3d_axes.png]

body,
    html { height: 100%; padding: 0; margin: 0; /*将border和padding绘制在设置宽高之内*/ box-sizing: border-box; overflow: hidden; }
    .wraper { width: 260px; height: 260px; margin: 128px auto; /*景深，可以理解为视角到3D物体的距离，设置于舞台元素上*/ perspective: 1000px; }
    .cube { height: 100%; width: 100%; position: relative; /*子元素继承3D效果*/ transform-style: preserve-3d; /*加上下边这句可以体现出立体感*/ /*transform: rotateX(-30deg) rotateY(-45deg);*/ }
    .cube>div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, .8); text-align: center; line-height: 260px; color: #fff; font-size: 48px; border: 2px solid #fff; /*设置文本内容不可选*/ user-select: none; }
    .front { /*正面不用旋转，直接向前平移半个盒子宽*/ transform: translateZ(130px); }
    .end { /*向后旋转，以确保盒子上的文字朝向盒子外*/ transform: rotateY(180deg) translateZ(130px); }
    .top { transform: rotateX(90deg) translateZ(130px); }
    .bottom { transform: rotateX(-90deg) translateZ(130px); }
    .left { transform: rotateY(-90deg) translateZ(130px); }
    .right { transform: rotateY(90deg) translateZ(130px); }

下来就是鼠标拖动盒子的核心代码了，先理一下思路，鼠标拖动盒子，就是记录下盒子的角度，然后点击鼠标并拖动的时候根据鼠标移动方向和距离重新计算出盒子的旋转角度，鼠标松开时取消监听，记录盒子角度。这和我之前写的一个例子**[鼠标拖动div][div]** 有点相似：

再加一个使用滚轮改变景深的函数，因为景深太小视角会到盒子里边，并不是很好看，所以限制了一下，在景深小于`300px`时将不会减小。

## 二、最终效果图： ##

![3Dbox.gif][]

## 三、代码文件图 ##

本例子只有一个文件如下：  
![V08C0HMKxD7MA0oWGUX.png][]

## 四、补充 ##

好了，到这里这个盒子看起来已经很`3D`了，[这里是我的博客][Link 1]，欢迎来访。

可拖拽的3D盒子

> 代码地址如下：  
> [http://www.demodashi.com/demo/11453.html][http_www.demodashi.com_demo_11453.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_11453.html]: http://www.demodashi.com/demo/11453.html
[3d_axes.png]: /images/20220530/f41a13a9fdf54fbb98aa2ce3985072ae.png
[div]: https://github.com/kongchenglc/Demo/blob/master/drag.html
[3Dbox.gif]: /images/20220530/9553e86a237246ad835bb534799659fa.png
[V08C0HMKxD7MA0oWGUX.png]: /images/20220530/af335d6f546d436a9b079a6c489e2968.png
[Link 1]: https://kongchenglc.github.io/