<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS+CSS3实现可拖动立方体特效</title>
<style>
h3{
text-align: center;
color: #5A5A5A;
}
body{
background: #000;
}
#box{
width: 200px;
height: 200px;
margin:150px auto;
background: #ccc;
position: relative;
transform:perspective(800px) rotateY(-60deg) rotateX(45deg);
transform-style:preserve-3d;
}
#box div{
width:100%;
height:100%;
position: absolute;
top:0;
left: 0;
background-size:cover;
-webkit-box-shadow:0 0 100px #5fbcff;
opacity: .8;
}
.front{
transform:translateZ(100px);
background: url(images/a5.png);
}
.back{
transform:translateZ(-100px);
background: url(images/a1.png);
}
.left{
transform:translateX(-100px) rotateY(90deg);
background: url(images/a2.png);
}
.right{
transform:translateX(100px) rotateY(90deg);
background: url(images/a3.png);
}
.top{
transform:translateY(-100px) rotateX(90deg);
background: url(images/a4.png);
}
.bottom{
transform:translateY(100px) rotateX(90deg);
background: url(images/a8.png);
}
</style>
<script>
window.onload=function()
{
var oBox=document.querySelector('#box');
var y=-60;
var x=45;
oBox.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.clientY-disY;
y=oEvent.clientX-disX;
oBox.style.transform='perspective(800px) rotateX('+x+'deg) rotateY('+y+'deg)';
};
document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
};
</script>
</head>
<body>
<h3>按住鼠标左键拖动</h3>
<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>
</html>
JS+CSS3实现鼠标可拖动的交互式立方体旋转特效源码.zip
版权申诉
21 浏览量
2022-11-01
01:17:29
上传
评论
收藏 54KB ZIP 举报
JS+CSS3实现鼠标可拖动的交互式立方体旋转特效源码.zip （7个子文件） 
132687015775739524 images 
a2.png 8KB a3.png 7KB a8.png 11KB a1.png 7KB a5.png 9KB a4.png 12KB
index.html 2KB资源评论
