首页 > 代码库 > css3骰子(transform初识)

css3骰子(transform初识)

利用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>

 

css3骰子(transform初识)