Using CSS3 to realize __css of dice 3d rotation effect

CSS Part code:

 . dice_box {width:400px;
	height:400px;
	position:relative;
	margin:0 Auto;
	perspective:900px;
	-moz-perspective:900px;
	-webkit-perspective:900px;
	perspective-origin:50%, 50%;
	-moz-perspective-origin:50%, 50%;
-webkit-perspective-origin:50%, 50%;
	} #dice1 {position:relative;
	-moz-transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
	top:-90px;
	left:100px;
	width:150px;
height:150px;
	} #dice2 {position:relative;
	-moz-transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
 	width:150px;
	left:120px; 
	Top: -150px;
height:150px;
 	} #dice3 {position:relative;
	Top: -320px; 
	left:20px;
	-moz-transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
	width:150px;
height:150px;
	#dice3 ul Li, #dice1 ul Li, #dice2 ul li {position:absolute;
	List-style:none;
	width:50px;
	height:50px;
	line-height:50px;
	Text-align:center;
font-size:50px; #dice1 ul Li:nth-of-type (1), #dice2 ul Li:nth-of-type (1), #dice3 UL Li:nth-of-type (1) {top:0px;
    left:50px;
	-moz-transform-origin:bottom;
	-moz-transform:rotatex ( -90DEG);
	-webkit-transform-origin:bottom;
-webkit-transform:rotatex ( -90DEG);
	#dice1 ul Li:nth-of-type (2), #dice2 ul Li:nth-of-type (2), #dice3 ul Li:nth-of-type (2) {top:50px;
left:50px;
	#dice1 ul Li:nth-of-type (3), #dice2 ul Li:nth-of-type (3), #dice3 ul Li:nth-of-type (3) {top:50px;
	left:100px;
	-moz-transform-origin:left;
	-moz-transform:rotatey ( -90DEG);
	-webkit-transform-origin:left;
-webkit-transform:rotatey ( -90DEG);
	#dice1 ul Li:nth-of-type (4), #dice2 ul Li:nth-of-type (4), #dice3 ul Li:nth-of-type (4) {top:50px;
	left:0px;
	-moz-transform-origin:right;
	-moz-transform:rotatey (90DEG);
	-webkit-transform-origin:right;
-webkit-transform:rotatey (90DEG);
	#dice1 ul Li:nth-of-type (5), #dice2 ul Li:nth-of-type (5), #dice3 ul Li:nth-of-type (5) {top:100px;
 	left:50px;
	-moz-transform-origin:top; 
	-moz-transform:rotatex (90DEG); -webkit-transform-origIn:top;
-webkit-transform:rotatex (90DEG);
	#dice1 ul Li:nth-of-type (6), #dice2 ul Li:nth-of-type (6), #dice3 ul Li:nth-of-type (6) {top:50px;
	left:50px;
	-moz-transform:translatez (50px);
-webkit-transform:translatez (50px); }

JS part of the code:

function Randomzeroone () {var n=math.random ();
	if (n<0.5) {return 0;
	}else{return 1;
		   } function Caldice (a,b,c) {var all=$ ("#k3_hz div.bet_k3_hz div");
		   All.attr ("Class", "K3_off");
		   $ ("Div.dice_box"). Show ();
		   $ ("#shadeDiv"). Show ();
		   var i=0;
		   var k=0;
		   var n=0;
		   var index=1;
			   var r= setinterval (function () {var x=randomzeroone ();
			   var y=randomzeroone ();
				  var z=randomzeroone ();
						if (n>1500) {n=0;
						k=0;
						i=0;
		        		var box= document.getelementbyid ("Dice1");
					    Box.style.transform= "Rotate3d" ("+x+", "+y+", "+z+", "+n+");
					    var box1= document.getelementbyid ("Dice2"); 
					    Box1.style.transform= "Rotate3d" ("+x+", "+y+", "+z+", "+k+");
					    var box2= document.getelementbyid ("Dice3");  
					    Box2.style.transform= "Rotate3d" ("+x+", "+y+", "+z+", "+i+");
					    $ (box). css ({"-webkit-transform": "Rotate3d" ("+x+", "+y+", "+z+", "+n+") "}); $ (box1). css ({"-webkit-transform": "RotaTe3d ("+x+", "+y+", "+z+", "+k+") "});
					    $ (box2). css ({"-webkit-transform": "Rotate3d" ("+x+", "+y+", "+z+", "+i+" deg) "});
						$ ("#dice1 li img"). Last (). attr ("src", "/capricorn/resources/images/touch/" +a+ ". png");
						$ ("#dice2 li img"). Last (). attr ("src", "/capricorn/resources/images/touch/" +b+ ". png");
						$ ("#dice3 li img"). Last (). attr ("src", "/capricorn/resources/images/touch/" +c+ ". png");
					Clearinterval (R);
						var m=setinterval (function () {$ ("Div.dice_box"). Hide ();
						$ ("#shadeDiv"). Hide ();
						 Code=a+b+c;
						   var all=$ ("#k3_hz div.bet_k3_hz div");
						All.attr ("Class", "K3_off");
						$ (all[code-4]). attr ("Class", "k3_on");
					Clearinterval (m);
					},1000);
			  Return
			  } index=index+0.01;
			  i+= (120/index);
			  k+= (100/index);
			  n+= (60/index);
			  var box= document.getelementbyid ("Dice1");
			  $ (box). css ({"-webkit-transform": "Rotate3d" ("+x+", "+y+", "+z+", "+i+") "}); 
		Box.style.transform= "Rotate3d" ("+x+", "+y+", "+z+", "+i+");	  var box1= document.getelementbyid ("Dice2");
			  $ (box1). css ({"-webkit-transform": "Rotate3d (1,0,1," +i+ "deg)"}); 
			  Box1.style.transform= "Rotate3d" ("+x+", "+y+", "+z+", "+k+");
			  var box2= document.getelementbyid ("Dice3");
			  $ (box2). css ({"-webkit-transform": "Rotate3d (0,1,1," +i+ "deg)"}); 
		  Box2.style.transform= "Rotate3d" ("+x+", "+y+", "+z+", "+n+");
},50); 
 }

HTML Section Code:

 
  <div class= "Dice_box" style= "display:none;z-index:110;" > <div id= "Dice1" > <ul> <li></li> <li>/ Resources/images/touch/2.png "></li> <li>/ Resources/images/touch/3.png "></li> <li>/ Resources/images/touch/4.png "></li> <li>/ Resources/images/touch/5.png "></li> <li>/ Resources/images/touch/6.png "></li> </ul> </div> <div id=" Dice2 "> <ul> < Li>/resources/images/touch/1.png" ></li> < Li> /resources/images/touch/2.png" ></li> <li >/resources/images/touch/3.png" ></li> <li >/resources/images/touch/4.png" ></li> <li >/resources/images/touch/5.png" ></li> <li >/resources/images/touch/6.png" ></li> </ ul> </div> <div id= "Dice3" > <ul> <li>/resources/images/touch/1.png" ></li> <li>/resources/images/touch/2.png" ></li> <li>/resources/images/touch/3.png" ></li> &LT;LI&GT;&LT;img src= "<%=request.getattribute (" BasePath ")%>/resources/images/touch/4.png" ></li> <li> /resources/images/touch/5.png" ></li> <li> /resources/images/touch/6.png" ></li> </ul
 > </div> </div>

Here, the introduction of jquery, Support Firefox and Google, we can see the effect is very simple, do not make netease so cow appearance, if there is Daniel hope to guide twos.