CSS3制作骰子

    body {
        perspective: 1000px;/*透视效果必须设置在父元素 因为我下面
        父元素要转动 所有写在body里面*/
        /* perspective-origin: 50% 50%; 该属性表示沿着哪个方向移动  该属性默认就是50% 50%*/
    }
    .box {
        width: 100px;
        height: 100px;
        margin: 200px auto;
        position: relative;
        transform-style: preserve-3d;/*表示所有元素都是3D效果呈现*/ 
       transition: all 5s;/*设置过渡效果*/
    }
    .box:hover {/*鼠标经过box 盒子会往x轴和z轴旋转360°*/
        transform: rotateX(360deg) rotateZ(360deg); 
    }
   .box> div {
        width: 100%;
        height: 100%;
        position: absolute;/*设置定位 让所有盒子粘在一起*/
        left: 0;
        top: 0;
        box-shadow:inset 0 0 15px rgba(0, 0, 0, .2);/*给盒子设置盒子内阴影 15px的像素阴影 透明度为0.2*/
        background-color: rgba(255, 255, 255, .1);/*设置盒子透明度为0.1*/
        text-align: center;/*文字居中*/
        line-height: 100px;/*文字垂直居中*/
    }
    .one {
        transform: translateZ(50px);/*元素向z轴走50个像素 效果会更加的立体
         小伙伴也可以尝试把这个属性去掉 就能很清晰的看到不一样的呈现效果 */
    }
    .two {