投骰子 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>骰子</title>
    <style type="text/css">
        .sbing{ 
        -webkit-perspective: 800;
        -webkit-perspective: 50% 50%;}

        #cube{ 
            -webkit-transform-style: preserve-3d;
            position: relative;
            width: 200px;
            height:200px;
            margin: 100px auto; }
        
        .page{ 
            position: absolute;
            width: 160px;
            line-height: 160px;
            text-align: center;
            font-size: 200px;
            color: #ff0;
            padding: 20px;
            background: #00f;}

        #page1{ 
            background: #ddbdff; }

        #page2{ 
            background: #bc1339;
            -webkit-transform-origin: left;
            -webkit-transform: rotateY(90deg);}

        #page3{ 
            background: #a369af;
            -webkit-transform-origin: right;
            -webkit-transform: rotateY(-90deg); }

        #page4{ 
            background: #032149;
            -webkit-transform-origin: top;
            -webkit-transform: rotateX(-90deg); }

        #page5{ 
            -webkit-transform-origin: bottom;
            -webkit-transform: rotateX(90deg); }

        #page6{ 
            background: #838b75;
            -webkit-transform: translateZ(-200px); }

        .operation{ 
            width: 800px;
            margin: 30px auto; }

        .operation .centeral{ 
            width: 720px; }

        button{ 
            display: block;
            width: 100px;
            height: 60px;
            text-align: center;
            font-size: 16px;
            margin: 20px auto; }
    </style>
    <script type="text/javascript">
    window.onload = function(){
        var cube = document.getElementById("cube");
        var btn  = document.getElementById("btn");
        var reset = document.getElementById("reset");
    
        var z = Math.random()*4020;
        var x = Math.random()*4020;
        var y = Math.random()*4020;

        btn.onclick = function(){
            cube.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)"
            cube.style.webkitTransition = "-webkit-transform 7s ease";
        }
        reset.onclick = function(){ 
            cube.style.webkitTransform = "rotateX("+0+"deg) rotateY("+0+"deg) rotateZ("+0+"deg)"
            cube.style.webkitTransition = "none"; 
        }
    }
    
    </script>
</head>
<body>
<div class="sbing">
    <div id="cube">
        <div class="page" id="page1">1</div>
        <div class="page" id="page2">2</div>
        <div class="page" id="page3">3</div>
        <div class="page" id="page4">4</div>
        <div class="page" id="page5">5</div>
        <div class="page" id="page6">6</div>
    </div>
</div>
<button id="btn">点击旋转</button>
<button id="reset">点击复位</button>
</body>
</html>
View Code

 

 

 

 

posted @ 2016-08-27 19:50  巫瞅瞅  阅读(101)  评论(0)  编辑  收藏  举报