纯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>