我们都知道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>