<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="page-view-size" content="640*530">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
@charset "utf-8";
div{position: absolute;}
.bor{
top:200px;
left:200px;
perspective: 800px;
transform-style: preserve-3d;
}
.square{
position:relative;
transform-style: preserve-3d;
transform-origin:50px 50px 50px;
-moz-transform:rotateY(30deg);
transform:rotateY(30deg);
}
button{
position:relative;
left:30px;
top:20px;
}
.square div{
position:absolute;
100px;
height:100px;
opacity:0.5;
}
.square div:nth-child(1) {
-moz-transform: rotateY(0deg)
rotateX(90deg);
background:#19469d;
transform-origin:top;
}
.square div:nth-child(2) {
-moz-transform: rotateY(90deg)
translatez(0px);
background:#954121;
transform-origin:right;
}
.square div:nth-child(3) {
-moz-transform: rotateY(0deg)
rotateX(-90deg) translatez(0px);
background:#a7dbd8;
transform-origin:bottom;
}
.square div:nth-child(4) {
-moz-transform: rotateY(-90deg) translatez(0px);
background:#fa6900;
transform-origin:left;
}
.square div:nth-child(5) {
-moz-transform: rotateY(0deg)
translatez(100px);
background:#ffff4f;
}
.square div:nth-child(6) {
-moz-transform:rotateY(0deg)
translatez(0px);
background:#ffbbbb;
}
</style>
</head>
<body leftmargin="0" topmargin="0" >
<div class="bor">
<div class="square" id="square">
<div id="top">上</div>
<div id="right">右</div>
<div id="bottom">下</div>
<div id="left">左</div>
<div id="face">前</div>
<div id="back">后</div>
</div>
</div>
<button id="btn3">开始转</button>
</body>
<script type="text/javascript">
window.onload=function(){
var rotateX=30,
rotateY=30,
btn= document.getElementById('btn3'),
square=document.getElementById('square');
btn.onclick=function(){
if(btn.innerHTML=='开始转'){
timer=setInterval(function(){
rotateX+=10,rotateY+=10;
square.setAttribute('style','-moz-transform: rotateY('+rotateX+'deg) rotateX('+rotateY+'deg)');
},300);
btn.innerHTML='停止转';
}else{
clearTimeout(timer);
btn.innerHTML='开始转';
}
};
}
</script>
</html>