网页实现掷骰子小游戏

首先明确需求：

       在网页正中间展示骰子，点数为一点，点击骰子，骰子旋转然后停留在随机点位上。再次点击骰子，骰子可以继续旋转并停留在随机点位上。

       这里我们使用css3动画、3d旋转配合js实现效果

一，HTML结构

二，css样式

 这里暂时先注释掉动画，不注释掉打开页面动画会直接运行，后边我们会点击骰子时以js的方式加入动画

 #wrapper{
            perspective: 500px;/*设置骰子被查看位置的视图（观察者与z=0平面的距离）：*/
            -webkit-perspective:500px;
            -moz-perspective:500px;
            overflow: hidden;
        }
        #group{
            width: 200px;
            height: 200px;
            position: relative;
            transform-style:preserve-3d;/*使其子元素保持3D转换*/
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            transform-origin:50% 50% -100px;/*设置骰子旋转的基点位置（骰子中心点）*/
            -webkit-transform-origin:50% 50% -100px;
            -moz-transform-origin:50% 50% -100px;
            margin: 200px auto;
  
            /* 
            animation:scroll 2s linear 0s 2 alternate;
            -webkit-animation:scroll 2s linear 0s 2 alternate;/*设置骰子动画效果*/
            -moz-animation:scroll 2s linear 0s 2 alternate; 
            */

            background-color:#E8E8E9;
            border-radius:20px;
        }
        .page{
            width: 200px;
            height: 200px;
            position: absolute;
            border-radius: 20px;
            text-align: center;
            overflow: hidden;
            text-align: center;
            background-color:#E8E8E9;
            border:1px solid #E0E0E0; 
        }
        /*开始设置每个面的角度，将6个面拼成一个正方体*/
        #page2{
            transform-origin:right;/*点数为2的面以右边为转轴转动*/
            transform:rotateY(-90deg);/*绕Y轴逆时针转动90度*/
            -webkit-transform-origin:right;
            -webkit-transform:rotateY(-90deg);
            -moz-transform-origin:right;
            -moz-transform:rotateY(-90deg);
        }
        #page3{
            transform-origin:left;/*点数为3的面以左边为转轴转动*/
            transform:rotateY(90deg);/*绕Y轴顺时针转动90度*/
            -webkit-transform-origin:left;
            -webkit-transform:rotateY(90deg);
            -moz-transform-origin:left;
            -moz-transform:rotateY(90deg);
        }
        #page4{
            transform-origin:top;/*点数为4的面以上边为转轴转动*/
            transform:rotateX(-90deg);/*绕X轴逆时针转动90度*/
            -webkit-transform-origin:top;
            -webkit-transform:rotateX(-90deg);
            -moz-transform-origin:top;
            -moz-transform:rotateX(-90deg);
        }
        #page5{
            transform-origin:bottom;/*点数为5的面以下边为转轴转动*/
            transform:rotateX(90deg);/*绕X轴顺时针转动90度*/
            -webkit-transform-origin:bottom;
            -webkit-transform:rotateX(90deg);
            -moz-transform-origin:bottom;
            -moz-transform:rotateX(90deg);
        }
        #page6{
            transform:translateZ(-200px);/*点数为6的面沿Z轴向后平移200px*/
            -webkit-transform:translateZ(-200px);
            -moz-transform:translateZ(-200px);
        }
        .page span {
            display:inline-block;
            width:50px;
            height:50px;
            border-radius:25px;
            background-color:#050505;
            box-shadow:inset 3px 3px 5px #000;/*骰子点数的阴影效果*/
        }
        /*下面是对点数样式的控制*/
        #page1 span{
            position:absolute;
            left:50%;
            top:50%;
            margin-top:-25px;
            margin-left: -25px;
            background-color:#f00;
        }
        #page2 span {
            margin:75px 25px;
        }
        #page3 span {
            position:absolute;
        }
        #page3 span:first-child {
            top:20px;
            left:20px;
        }
        #page3 span:nth-child(2) {
            top:75px;
            left:75px;
        }
        #page3 span:last-child {
            bottom:20px;
            right:20px;
        }
        #page4 span {
            margin:25px 25px;
        }
        #page5 span {
            margin:25px 25px;
        }
        #page5 span:last-child {
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-25px;
            margin-top:-25px;
        }
        #page6 span {
            margin:7px 25px;
        }

三，css3动画

 /*设置骰子具体动画效果 确保骰子的每个面都可以看到，后面会运动快一些 1*/
        @keyframes scroll {
            0% {
                transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            25% {
                transform:rotateY(0deg) rotateX(90deg) rotateZ(90deg);
            }
            50% {
                transform:rotateY(0deg) rotateX(180deg) rotateZ(180deg);
            } 
            75% {
                transform:rotateY(180deg) rotateX(270deg) rotateZ(270deg);
            }
            100% {
                transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }
        }
        @-moz-keyframes scroll {
            0% {
                -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            25% {
                -moz-transform:rotateY(0deg) rotateX(90deg) rotateZ(90deg);
            }
            50% {
                -moz-transform:rotateY(0deg) rotateX(180deg) rotateZ(180deg);
            } 
            75% {
                -moz-transform:rotateY(180deg) rotateX(270deg) rotateZ(270deg);
            }
            100% {
                -moz-transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }
       }
        @-webkit-keyframes scroll {
            0% {
                -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            25% {
                -webkit-transform:rotateY(0deg) rotateX(90deg) rotateZ(90deg);
            }
            50% {
                -webkit-transform:rotateY(0deg) rotateX(180deg) rotateZ(180deg);
            } 
            75% {
                -webkit-transform:rotateY(180deg) rotateX(270deg) rotateZ(270deg);
            }
            100% {
                -webkit-transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }
        }

四，js部分

首先引入jQuery  

$('#group').click(function(){
        $('#group').removeAttr('style');
        setTimeout(function(){
            var num =  Math.ceil(Math.random()*6);
            if(num==1){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(360deg) rotateX(360deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(360deg) rotateX(360deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(360deg) rotateX(360deg) rotateZ(360deg)'
                })
            }else if(num==2){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(270deg) rotateX(360deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(270deg) rotateX(360deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(270deg) rotateX(360deg) rotateZ(360deg)'
                })
            }else if(num==3){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(180deg) rotateX(270deg) rotateZ(270deg)',
                    '-webkit-transform':'rotateY(180deg) rotateX(270deg) rotateZ(270deg)',
                    '-moz-transform':'rotateY(180deg) rotateX(270deg) rotateZ(270deg)'
                })
            }else if(num==4){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(180deg) rotateX(90deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(180deg) rotateX(90deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(180deg) rotateX(90deg) rotateZ(360deg)'
                })
            }else if(num==5){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(180deg) rotateX(270deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(180deg) rotateX(270deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(180deg) rotateX(270deg) rotateZ(360deg)'
                })
            }else if(num==6){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(180deg) rotateX(360deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(180deg) rotateX(360deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(180deg) rotateX(360deg) rotateZ(360deg)'
                })
            } 
        },1)
    })