玩骰子麽

本demo应用了css3 transition animate，若有兼容性问题，请升级你的浏览器！

这次先让大家玩玩！

结构层

ul骰子容器包裹6个面li；每个面里面包裹一个点数容器div.c-num用于position；最后就是调点数p的样式了。

<ul class="container">
        <li class="lf">
            <div class="c-num">
                <p class="num1"></p>
            </div>
        </li>
        <li class="rt">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
            </div>
        </li>
        <li class="top">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
            </div>
        </li>
        <li class="btm">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
                <p class="num6"></p>
            </div>
        </li>
        <li class="in">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
            </div>
        </li>
        <li class="out">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
            </div>
        </li>
    </ul>

表现层

ul,li,div,p{margin:0;padding:0;}
.container{
            position:relative;
            list-style:none;
}

先将容器ul相对定位，在将li绝对定位，则每个面li都在左上角便于rotate

transform:translate(100px,100px) rotateX(0deg) rotateY(0deg);

过渡xy方向以及旋转 参考W3C http://www.w3school.com.cn/cssref/pr_transform.asp

transform-style:preserve-3d;

嵌套元素以3d展示 http://www.w3school.com.cn/cssref/pr_transform-style.asp

transform-origin:50px 50px;

旋转中心位置http://www.w3school.com.cn/cssref/pr_transform-origin.asp

animation:nickAnimate 5s ease infinite;

动画调用http://www.w3school.com.cn/cssref/pr_animation.asp

animation-fill-mode:forwards;

规定动画完成后停留在最后一帧http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp

animation-play-state:paused;

默认为paused，不然页面刷新会自动执行动画的http://www.w3school.com.cn/cssref/pr_animation-play-state.asp

@keyframes nickAnimate{/*动画定义*/
            0%{
                transform:translate(100px,100px) rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform:translate(130px,120px) rotateX(1360deg) rotateY(1360deg);
            }
        }

动画的属性值可以随便调。

.container>li{
            position:absolute;
            width:100px;height:100px;
            border-radius:15px;
            background:#DDDBE6;
            overflow:hidden;
            border:1px solid #ddd;
        }

骰子的每个面的公共样式

将每个面rotate成一个立方体

.lf{
            transform:rotateY(90deg) translateZ(-50px);
        }
        .rt{
            transform:translateX(100px) rotateY(90deg) translateZ(-50px);
        }
        .top{
            transform:translateY(-50px) rotateX(90deg);
        }
        .btm{
            transform:translateY(50px) rotateX(90deg);
        }
        .in{
            transform:translateZ(50px);
        }
        .out{
            transform:translateZ(-50px);
        }

现在可以看到一个立方体了吧，下面就是一些定位样式渲染成骰子的样子

点数容器的公共样式

.c-num{/*点数容器*/
            position:relative;
            width:100%;
            height:100%;
            background:radial-gradient(#fff 35%,#DDDBE6);
        }

点数公用样式 我把每个点都居中了，然后在translate，其实直接translate或者position也可以，仁者见仁智者见智吧

p[class^='num']{
            position:absolute;
            width:20px;
            height:20px;
            background-color:red;
            border-radius:50%;

            top:50%;left:50%;
            margin-top:-5px;
            margin-left:-5px;
        }

下面就是点数p的样式微调了

/*点数1的面已经居中*/
        .lf .num1{}
        /*点数2的面translate慢慢调吧*/
        .in .num1{
            transform:translate(-5px,-20px);
        }
        .in .num2{
            transform:translate(-5px,20px);
        }
        /*点数3的面*/
        .rt .num1{
            transform:translate(-5px,-30px);
        }
        .rt .num2{
            transform:translateX(-5px);
        }
        .rt .num3{
            transform:translate(-5px,30px);
        }
        /*点数4的面*/
        .out .num1{
            transform:translate(-20px,20px);
        }
        .out .num2{
            transform:translate(-20px,-20px);
        }
        .out .num3{
            transform:translate(20px,20px);
        }
        .out .num4{
            transform:translate(20px,-20px);
        }
        /*点数5的面*/
        .top .num1{
            transform:translate(25px,-30px);
        }
        .top .num2{
            transform:translate(-25px,-30px);
        }
        .top .num4{
            transform:translate(-25px,25px);
        }
        .top .num5{
            transform:translate(25px,25px);
        }
        /*点数6的面*/
        .btm .num1{
            transform:translate(-25px,30px);
        }
        .btm .num2{
            transform:translate(-25px,0px);
        }
        .btm .num3{
            transform:translate(-25px,-30px);
        }
        .btm .num4{
            transform:translate(15px,30px);
        }
        .btm .num5{
            transform:translate(15px,0px);
        }
        .btm .num6{
            transform:translate(15px,-30px);
        }

行为层

document.getElementsByClassName('run')[0].onclick=function(){
        document.getElementsByClassName('container')[0].style.animationPlayState='running';
    };
    document.getElementsByClassName('paused')[0].onclick=function(){
        document.getElementsByClassName('container')[0].style.animationPlayState='paused';
    };

摇啊摇、暂停按钮就是控制animate的运行状态
ok！上完整代码有兴趣的玩玩吧！

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
    <title>css3 骰子 animate nick</title>
    <style>
        /*先将容器ul相对定位，在将li绝对定位，则每个面li都在左上角便于rotate*/
        ul,li,div,p{margin:0;padding:0;}
        .container{
            position:relative;
            list-style:none;
            transform:translate(100px,100px) rotateX(0deg) rotateY(0deg);/*过渡xy方向以及旋转http://www.w3school.com.cn/cssref/pr_transform.asp*/
            transform-style:preserve-3d;/*嵌套元素以3d展示 http://www.w3school.com.cn/cssref/pr_transform-style.asp*/
            transform-origin:50px 50px;/*旋转中心位置http://www.w3school.com.cn/cssref/pr_transform-origin.asp*/

            animation:nickAnimate 5s ease infinite;/*动画调用http://www.w3school.com.cn/cssref/pr_animation.asp*/
            animation-fill-mode:forwards;/*规定动画完成后停留在最后一帧http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp*/
            animation-play-state:paused;/*默认为paused，不然页面刷新会自动执行动画的http://www.w3school.com.cn/cssref/pr_animation-play-state.asp*/
        }
        @keyframes nickAnimate{/*动画定义*/
            0%{
                transform:translate(100px,100px) rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform:translate(130px,120px) rotateX(1360deg) rotateY(1360deg);
            }
        }
        .container>li{
            position:absolute;
            width:100px;height:100px;
            border-radius:15px;
            background:#DDDBE6;
            overflow:hidden;
            border:1px solid #ddd;
        }
        /*将每个面rotate成一个立方体*/
        .lf{
            transform:rotateY(90deg) translateZ(-50px);
        }
        .rt{
            transform:translateX(100px) rotateY(90deg) translateZ(-50px);
        }
        .top{
            transform:translateY(-50px) rotateX(90deg);
        }
        .btm{
            transform:translateY(50px) rotateX(90deg);
        }
        .in{
            transform:translateZ(50px);
        }
        .out{
            transform:translateZ(-50px);
        }
        /*现在可以看到一个立方体了吧，下面就是一些定位样式渲染成骰子的样子*/
        .c-num{/*点数容器*/
            position:relative;
            width:100%;
            height:100%;
            background:radial-gradient(#fff 35%,#DDDBE6);
        }
        p[class^='num']{/*点数公用样式 我把每个点都居中了，然后在translate，其实直接translate或者position也可以，仁者见仁智者见智吧*/
            position:absolute;
            width:20px;
            height:20px;
            background-color:red;
            border-radius:50%;

            top:50%;left:50%;
            margin-top:-5px;
            margin-left:-5px;
        }
        /*点数1的面已经居中*/
        .lf .num1{}
        /*点数2的面translate慢慢调吧*/
        .in .num1{
            transform:translate(-5px,-20px);
        }
        .in .num2{
            transform:translate(-5px,20px);
        }
        /*点数3的面*/
        .rt .num1{
            transform:translate(-5px,-30px);
        }
        .rt .num2{
            transform:translateX(-5px);
        }
        .rt .num3{
            transform:translate(-5px,30px);
        }
        /*点数4的面*/
        .out .num1{
            transform:translate(-20px,20px);
        }
        .out .num2{
            transform:translate(-20px,-20px);
        }
        .out .num3{
            transform:translate(20px,20px);
        }
        .out .num4{
            transform:translate(20px,-20px);
        }
        /*点数5的面*/
        .top .num1{
            transform:translate(25px,-30px);
        }
        .top .num2{
            transform:translate(-25px,-30px);
        }
        .top .num4{
            transform:translate(-25px,25px);
        }
        .top .num5{
            transform:translate(25px,25px);
        }
        /*点数6的面*/
        .btm .num1{
            transform:translate(-25px,30px);
        }
        .btm .num2{
            transform:translate(-25px,0px);
        }
        .btm .num3{
            transform:translate(-25px,-30px);
        }
        .btm .num4{
            transform:translate(15px,30px);
        }
        .btm .num5{
            transform:translate(15px,0px);
        }
        .btm .num6{
            transform:translate(15px,-30px);
        }
    </style>
</head>
<body>
   <!--功能-运行、暂停按钮-->
    <button class="run">摇啊摇</button>
    <button class="paused">暂停</button>
   <!--骰子的结构-->
   <!--骰子容器包裹6个面；每个面里面包裹一个点数容器用于position；最后就是调点数样式了-->
    <ul class="container">
        <li class="lf">
            <div class="c-num">
                <p class="num1"></p>
            </div>
        </li>
        <li class="rt">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
            </div>
        </li>
        <li class="top">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
            </div>
        </li>
        <li class="btm">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
                <p class="num6"></p>
            </div>
        </li>
        <li class="in">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
            </div>
        </li>
        <li class="out">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
            </div>
        </li>
    </ul>
<script>
//    摇啊摇、暂停按钮就是控制animate的运行状态
    document.getElementsByClassName('run')[0].onclick=function(){
        document.getElementsByClassName('container')[0].style.animationPlayState='running';
    };
    document.getElementsByClassName('paused')[0].onclick=function(){
        document.getElementsByClassName('container')[0].style.animationPlayState='paused';
    };
</script>
</body>
</html>

　　　毕竟还年少，自我感觉至少如此，有些玩心，大家有什么新奇好的想法可以给我留言或在我的博客首页qq交流，愿我们在娱乐的过程中共同进步！