css3骰子（transform初识）_html/css_WEB-ITnose

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

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

　　
        
                        ...        
            

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

　　
        
            X 方向：0度
        ...    

通过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 实现转动。

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

        
                                                                                
            
    
        
            X 方向：0度
        
            Y 方向：0度
        
            Z 方向：0度