css3骰子（transform初识）

浏览数：47 / 时间：2015年06月09日

利用css3制作可旋转的骰子，效果图如下，也可以查看 demo：

首先是骰子的html结构，.page 是骰子的六个页面的 class，#one-#six分别表示六个面，.point 是骰子表面的点数：

　　<div id="diceWapper">
        <div id="dice">
            <div id="one" class="page">
                <div class="point first"></div>
            </div>
            ...
        </div>        
    </div>

接着是控制骰子旋转方向和度数的控制器：

　　<div id="controler">
        <div class="direction">
            <span class="way">X 方向：<span id="xValue">0</span>度</span><input type="range" id="rotateX" min="-360" max="360" value="0" onchange="rotate()" />
        </div>
        ...
    </div>

通过css设置骰子各个面的位置，

首先设置 3d 场景：-webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; 场景离显示器距离 800，观察位置在显示器中间，

再设置 transform-style 转换类型为 3d 转换，

然后通过 position 来设置各个表面以及表面上点的位置，

最后用 transform-origin 给各个表面设置旋转轴的位置，和用 rotateX、rotateY、rotateZ 设置旋转角度：

　　#diceWapper{
        -webkit-perspective: 800;
        -webkit-perspective-origin: 50% 50%;
    }

    #dice{
        position: relative;
        -webkit-transform-style:preserve-3d;
    }

    .page{
        -webkit-transition: -webkit-transform 1s linear;
        position:absolute;
    }

    #two {
        -webkit-transform-origin:right;
        -webkit-transform: rotateY(-90deg);
    }
　　...

最后就是通过 input:range 的 change 事件来控制不同方向的旋转角度，获取三个 range 的 value 来设置 #dice 的 webkitTransform 实现转动。

完整代码如下（可运行）：

<!DOCTYPE html>
<html>
<head>
    <title>css3骰子</title>
    <meta charset="utf-8"/>
    <style>
    *{margin:0;padding:0;}
    body{background-color: #D3D3D3;}
    #diceWapper{
        -webkit-perspective: 800;
        -webkit-perspective-origin: 50% 50%;
        width: 200px;
        height: 200px;
        margin: 200px auto;
    }

    #dice{
        width: 90px;
        height: 90px;
        position: relative;
        -webkit-transform-style:preserve-3d;
    }

    .page{
        -webkit-transition: -webkit-transform 1s linear;
        position:absolute;
        width: 90px;
        height: 90px;
        background-color: #F8F8FF;
    }

    #two {
        -webkit-transform-origin:right;
        -webkit-transform: rotateY(-90deg);
    }

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

    #four {
        -webkit-transform-origin:top;
        -webkit-transform: rotateX(-90deg);
    }

    #five {
        -webkit-transform-origin:left;
        -webkit-transform: rotateY(90deg);
    }

    #six {
        -webkit-transform: translateZ(-90px);
    }

    .point{
        width: 20px;
        height: 20px;
        box-sizing:border-box;
        margin: 5px;
        border-radius:20px;
        border:2px solid #d7d7d7;
        background-color: #FF4040;
        position: absolute;
    }

    #one .first{left:30px;top:30px;}

    #two .first{left:30px;top:15px;}

    #two .second{left:30px;top:45px;}

    #three .first{left:0px;top:0px;}

    #three .second{left:30px;top:30px;}

    #three .third{left:60px;top:60px;}

    #four .first{left:15px;top:15px;}

    #four .second{left:45px;top:15px;}

    #four .third{left:15px;top:45px;}

    #four .fourth{left:45px;top:45px;}

    #five .first{left:15px;top:15px;}

    #five .second{left:45px;top:15px;}

    #five .third{left:15px;top:45px;}

    #five .fourth{left:45px;top:45px;}

    #five .fifth{left:30px;top:30px;}

    #six .first{left:15px;top:0px;}

    #six .second{left:45px;top:0px;}

    #six .third{left:15px;top:30px;}

    #six .fourth{left:45px;top:30px;}

    #six .fifth{left:15px;top:60px;}

    #six .sixth{left:45px;top:60px;}

    #controler{
        width: 300px;
        margin: 0 auto;
    }

    .way{width: 150px;display: inline-block;}
    input:range{width: 150px;display: inline-block;}
    </style>

    <script type="text/javascript">
    function rotate(){
        var x = document.getElementById("rotateX").value;
        var y = document.getElementById("rotateY").value;
        var z = document.getElementById("rotateZ").value;
        document.getElementById(‘dice‘).style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

        document.getElementById(‘xValue‘).innerText = x;
        document.getElementById(‘yValue‘).innerText = y;
        document.getElementById(‘zValue‘).innerText = z;
    }
    </script>
</head>
<body>
    <div id="diceWapper">
        <div id="dice">
            <div id="one" class="page">
                <div class="point first"></div>
            </div>
            <div id="two" class="page">
                <div class="point first"></div>
                <div class="point second"></div>
            </div>
            <div id="three" class="page">
                <div class="point first"></div>
                <div class="point second"></div>
                <div class="point third"></div>
            </div>
            <div id="four" class="page">
                <div class="point first"></div>
                <div class="point second"></div>
                <div class="point third"></div>
                <div class="point fourth"></div>
            </div>
            <div id="five" class="page">
                <div class="point first"></div>
                <div class="point second"></div>
                <div class="point third"></div>
                <div class="point fourth"></div>
                <div class="point fifth"></div>
            </div>
            <div id="six" class="page">
                <div class="point first"></div>
                <div class="point second"></div>
                <div class="point third"></div>
                <div class="point fourth"></div>
                <div class="point fifth"></div>
                <div class="point sixth"></div>
            </div>
        </div>        
    </div>

    <div id="controler">
        <div class="direction">
            <span class="way">X 方向：<span id="xValue">0</span>度</span><input type="range" id="rotateX" min="-360" max="360" value="0" onchange="rotate()" />
        </div>
        <div class="direction">
            <span class="way">Y 方向：<span id="yValue">0</span>度</span><input type="range" id="rotateY" min="-360" max="360" value="0" onchange="rotate()" />
        </div>
        <div class="direction">
            <span class="way">Z 方向：<span id="zValue">0</span>度</span><input type="range" id="rotateZ" min="-360" max="360" value="0" onchange="rotate()" />
        </div>
    </div>
</body>
</html>