网页实现掷骰子小游戏

最新推荐文章于 2022-07-17 23:31:04 发布

原创

最新推荐文章于 2022-07-17 23:31:04 发布 · 6.9k 阅读

10 ·

CC 4.0 BY-SA版权

首先明确需求：

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

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

一，HTML结构

 <body>
        <!-- span是点数 -->
        <div id="wrapper">
                <div id="group">
                    <div class="page" id="page1"><span></span></div>
                    <div class="page" id="page2"><span></span><span></span></div>
                    <div class="page" id="page3"><span></span><span></span><span></span>
</div>
                    <div class="page" id="page4"><span></span><span></span><span></span><span></span></div>
                    <div class="page" id="page5"><span></span><span></span><span></span><span></span><span></span></div>
                    <div class="page" id="page6"><span></span><span></span><span></span><span></span><span></span><span></span></div>
                </div>
        </div>
</body>

二，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-animat