拖拽思路：先定义上下左右重合在一起的六个面的旋转和移动角度
立方体效果 transform-style: preserve-3d;
定义初始值 transform: perspective(800px) rotateY(-60deg) rotateX(30deg);
其中js效果中初始值 var x = 30; var y = -60;就是初始定义的旋转角度
<style>
#box{
width: 200px;
height: 200px;
margin:150px auto;
transform-style: preserve-3d;
position: relative;
font-size:50px;
line-height: 200px;
text-align: center;
transform: perspective(800px) rotateY(-60deg) rotateX(30deg);
}
#box div{
width:100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0.8;
}
.front{
background: red;
transform: translateZ(100px);
}
.back{
background: yellow;
transform: translateZ(-100px);
}
.top{
background: blue;
transform: translateY(-100px) rotateX(90deg);
}
.bottom{
background: green;
transform: translateY(100px) rotateX(-90deg);
}
.left{
background: aqua;
transform:translateX(-100px) rotateY(-90deg);
}
.right{
background: #399;
transform:translateX(100px) rotateY(90deg);
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oBox = document.getElementById('box');
var x = 30;
var y = -60;
document.onmousedown = function(ev){
var oEvent = ev||event;
var disX = oEvent.clientX - y;
var disY = oEvent.clientY - x;
document.onmousemove = function(ev){
var oEvent = ev||event;
x = oEvent.clientX - disX;
y = oEvent.clientY - disY;
oBox.style.WebkitTransform = 'perspective(800px) rotateY('+x+'deg) rotateX('+(-y)+'deg)';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
},false);
</script>
</head>
<body>
<div id="box">
<div class="front">前面</div>
<div class="back">后面</div>
<div class="top">上面</div>
<div class="bottom">下面</div>
<div class="left">左面</div>
<div class="right">右面</div>
</div>
</body>
网友评论