写一个正方体 

<!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;
width: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>
posted @ 2017-01-05 16:44  chaimens  阅读(208)  评论(0)  编辑  收藏  举报