css3实现掷骰子（无图）

抽奖或游戏之类的动画很多时候用到掷骰子，一般采用gif图片格式实现动画效果。gif图片占内存较大，用户体验不好，下面用css3实现的掷骰子效果，骰子点数、面和转动效果都是有css，css3完成的。截图gif图如下：

骰子.gif

；这个特么的有点快啊动态图；
打开可见效果：链接网页 http://htmlpreview.github.io/?https://github.com/buwu/simple/blob/master/3d%E6%8E%B7%E9%AA%B0%E5%AD%90.html
制作过程如下：

一、制作六个面，如下图：

1494556776(1).jpg

完全用css写出来，为了使其更加真实，可以让点数的圆圈加一些阴影，这一步比较简单。

二、将六个面拼成一个骰子

Paste_Image.png

这一步需要用到css3的transform中rotate和translate。下面的css代码会纤细讲到。

三、让骰子动起来

这一步需要用到css3的animation。详细看下面css代码。

1.模板如下：

/*span是点数*/

        

            

            

            

            

            

            

         

2.css

/*需要注意css3中X轴以右为正方向，Y轴向下为正方向，Z轴以向屏幕外面为正方向*/