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