css3--旋转的3D魔方

  <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title></title>
 	<link rel="stylesheet" href="">
 	<style type="text/css" media="screen">

@keyframes round{
	0%{transform:  rotateY(0deg) rotateX(0deg);}
	100%{transform: rotateY(360deg) rotateX(360deg);}
}
 		html,body{
 			width:100%;
 			height:100%;
 		    perspective: 3000px;
 			
 		}
 		.con{
 			position: absolute;
 			width:300px;
 			height:300px;
 			opacity: 0.3;

 		}
 		.wra{
 			 

 			 transform-style: preserve-3d;
 			position: absolute;

			width:300px;
 			height:300px;

 			top:calc(50% - 150px);
 			left:calc(50% - 150px);
 			animation:round 10s linear infinite;
 		}
 		.con:nth-of-type(1){
			background-color: red;
			transform: rotateY(90deg) translatez(150px);
 		}
 		.con:nth-of-type(2){
			background-color: blue;
			transform: rotateY(180deg) translatez(150px);
 			
 		}
 		.con:nth-of-type(3){
			background-color: green;
			transform: rotateY(270deg) translatez(150px);
 			
 		}
 		.con:nth-of-type(4){
			background-color: yellow;
			transform: rotateY(360deg) translatez(150px);
 			
 		}
 		.con:nth-of-type(5){
			background-color: black;
			transform: rotateX(90deg) translatez(-150px);
 			
 		}
 		.con:nth-of-type(6){
			background-color:#B14DA1FF;
			transform: rotateX(90deg) translatez(150px);
 			
 		}
 	</style>
 </head>
 <body>
 	<div class="wra">
 		<div class="con"></div>
 		<div class="con"></div>
 		<div class="con"></div>
 		<div class="con"></div>
 		<div class="con"></div>
 		<div class="con"></div>

 	</div>
 	<script>
 		document.body.onmousemove=function(e){
 			this.style.perspectiveOrigin=""+e.pageX+"px "+e.pageY+"px";
 		}
 	</script>
 </body>
 </html>

css3--旋转的3D魔方_第1张图片

你可能感兴趣的:(css,css3)