css3摇骰子,css3骰子（transform初识）

css3骰子

}#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;}

functionrotate(){varx=document.getElementById("rotateX").value;vary=document.getElementById("rotateY").value;varz=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;

}