h5的旋转立方体(可拖拽)

发布于 分类: 特效案例 1418

我们都知道h5可以做出很多很炫的效果,主要就看我们怎么玩了。下面就展示一些3D立方体的实现代码;

css样式

#box{ width:200px; height:200px; margin:100px auto; transform:perspective(1200px) rotateY(-60deg) rotateX(30deg); position:relative;    
	transform-style:preserve-3d;    
	transition:1s all ease-out;    
	}    
	#box div{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; line-height:200px; font-size:100px; color:#fff; opacity:0.5;}    
	#box div.front{ background:red; transform:translateZ(100px)}    
	#box div.back{ background:#3C0; transform:translateZ(-100px)}    
	#box div.left{ background:pink; transform:translateX(-100px) rotateY(90deg)}    
	#box div.right{ background:#3FC; transform:translateX(100px) rotateY(90deg)}    
	#box div.top{ background:#F0F; transform:translateY(-100px) rotateX(-90deg);}    
	#box div.bottom{ background:#000; transform:translateY(100px) rotateX(-90deg);}    
	#box:active{    
		transform:perspective(1200px) rotateY(360deg) rotateX(360deg);

js代码

window.onload=function(){    
	var oBox=document.getElementById('box');    
	var y=-60;    
	var x=30;    
	document.onmousedown=function(ev){    
		var disX=ev.clientX-y;    
		var disY=ev.clientY-x;    
		document.onmousemove=function(ev){    
			y=ev.clientX-disX;    
			x=ev.clientY-disY;    
			oBox.style.transform='perspective(1200px) rotateY('+y+'deg) rotateX('+x+'deg)';    
		}    
		document.onmouseup=function(){    
			document.onmousemove=document.onmouseup=null;    
		}    
		return false;    
	}    
}

html代码

<body>    
<div id="box">    
	<div class="front">前</div>    
<div class="back">后</div>    
<div class="left">左</div>    
<div class="right">右</div>    
<div class="top">上</div>    
<div class="bottom">下</div>    
</div>    
</body>

在线展示

赞 888

关于作者:xiaona

一个喜欢研究的前端工程师。

请进入“Zblog后台” -> “畅言” 登陆你的畅言账号。