JS+CSS3实现可拖动立方体特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS+CSS3实现可拖动立方体特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

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

附件:下载该文件资源,减少时间成本(增值服务)