Css style - dice 3d - Code World

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>骰子3D图</title>
		<style class="text/css">
		.wrap{
			width:100px;
			height:100px;
			border:1px solid glod;
			transform-style:preserve-3d;
			position:relative;
			margin:200px auto;
			transform:rotateY(45deg) rotateX(45deg) rotateZ(45deg);
			transition:5s;
		}
		.wrap:hover{
			transform:rotateY(720deg) rotateX(45deg) rotateZ(45deg);
		}
		.wrap div{
			width:100px;
			height:100px;
			text-align:center;
			line-height:100px;	
			color:white;
			position:absolute;
			top:0;
			left:0;
			transition:3s;
			opacity:0.5;
		}
		/*.wrap:hover*/ .box1{
			background:red;
			transform:rotateY(90deg) translateZ(50px);
		}
		/*.wrap:hover */.box2{
			background:yellow;
			transform:rotateY(90deg) translateZ(-50px);
		}
		/*.wrap:hover*/ .box3{
			background:green;
			transform:rotateX(90deg) translateZ(50px);	
		}
		/*.wrap:hover*/ .box4{
			background:blue;
			transform:rotateX(90deg) translateZ(-50px);	
		}
		/*.wrap:hover*/ .box5{
			background:plum;
			transform:translateZ(-50px);
		}
		/*.wrap:hover*/ .box6{
			background:black;
			transform:translateZ(50px);
			
		}		
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>	
			<div class="box4">4</div>
			<div class="box5">5</div>
			<div class="box6">6</div>
		</div>
	</body>
</html>
Css style - dice 3d

Guess you like
