纯css、div、script制作可拖动的3d盒子

纯css、div、script制作可拖动的3d盒子

效果图如下：

html如下：

<template>
  <div class="dragAll">
    <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>
  </div>
</template>

script如下：

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.dragBox();
  },
  methods: {
    dragBox() {
      var cube = document.querySelector(".cube"),
        downX,
        downY,
        moveX,
        moveY,
        tempX,
        tempY,
        degX = 0,
        degY = 0;
      window.onmousedown = function (e) {
        e = e || event;
        downX = e.clientX; //获取鼠标点下去时的坐标
        downY = e.clientY;
        window.onmousemove = function (e) {
          e = e || event;
          moveX = e.clientX - downX; //算出鼠标移动的距离
          moveY = e.clientY - downY;
          //根据一定比例将变化反应在盒子上，改变比例5可以调节拖动的速度
          tempX = degX + moveX / 5;
          tempY = degY - moveY / 5;
          cube.style.transform =
            "rotatex(" + tempY + "deg) rotatey(" + tempX + "deg)";
        };
      };
      window.onmouseup = function (e) {
        e = e || event;
        degX += moveX / 5; //鼠标松开时将拖动期间改变的最终结果保存
        degY += -moveY / 5;
        window.onmousemove = null; //取消监听
      };
      var n = 1000;
      var wraper = document.querySelector(".wraper");
      wraper.style.perspective = n + "px";
      window.onmousewheel = function (e) {
        e = e || event;
        if (e.wheelDelta) {
          //判断浏览器IE，谷歌滑轮事件
          if (e.wheelDelta > 0) {
            //当滑轮向上滚动时减小景深
            wraper.style.perspective = n - 50 + "px";
            if (n > 350) {
              n = n - 50;
            }
          }
          if (e.wheelDelta < 0) {
            //当滑轮向下滚动时增加景深
            wraper.style.perspective = n + 50 + "px";
            n += 50;
          }
        } else if (e.detail) {
          //Firefox滑轮事件
          if (e.detail > 0) {
            wraper.style.perspective = n - 50 + "px";
            if (n > 350) {
              n = n - 50;
            }
          }
          if (e.detail < 0) {
            wraper.style.perspective = n + 50 + "px";
            n += 50;
          }
        }
      };
    },
  },
};
</script>

style如下：

<style scoped>
.dragAll {
  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, 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);
}
</style>