CSS制作3D旋转正方体-CFANZ编程社区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{ margin:0;padding:0;}
			
			#dkk{width:200px;
				height:200px;
				position:absolute;/*大盒子先居中可以用其他效果居中*/
                left:50%;
                top:50%;
                transform: translateX(-50%) translateY(-50%);
				perspective:1000px;/*透视效果*/
				}
			
			.big{/*这个就是正方体了*/
				position: relative;
				width:200px;
				height:200px;
				transform-style: preserve-3d;/*变成3D效果*/
				-ms-transform-style: preserve-3d;/*兼容浏览器*/
				transform:rotateX(-60deg) rotateY(-60deg) rotateZ(0deg);
				animation:dh 10s infinite linear;
				
				font-size: 50px;
			}
			.big:hover{
				transform:rotateX(-60deg) rotateY(-60deg) rotateZ(0deg);
				animation:dh2 10s infinite linear;
			}
			
			@keyframes dh{
             0% {transform: rotateX(0deg) rotateY(0deg)rotateZ(0deg);}
             100% {transform: rotateX(360deg) rotateY(360deg)rotateZ(0deg);}
            }
            
			div[class^="box"]{/*名字带box的div全吃这个,省代码写法*/
				width:200px;
				height:200px;
				position: absolute;
				transition: all 1s;
				opacity: 0.8;/*透明度*/
			}
			/*div[class^="box"]:hover{
				width:160px;
				height:160px;
				position: absolute;
				transition: all 1s;
			}*/
			.box1{/*左*/
				background-color:green;
				transform:translateX(-100px)rotateY(90deg);}
			
			.box2{/*右*/
				background-color:deepskyblue;
				transform:translateX(100px) rotateY(90deg);}
			
			.box3{/*上*/
				background-color:indianred ;
				transform:translateY(-100px) rotateX(90deg);}
			
			.box4{/*下*/
				background-color:gold;
				transform:translateY(100px) rotateX(90deg);}
			
			.box5{/*前*/
				background-color:blueviolet ;
				transform:translateZ(100px) rotateY(0deg);}
			
			.box6{/*后*/
				background-color: darkblue;
				transform:translateZ(-100px) rotateY(0deg);}
				
			.big:hover .box6{transform:translateZ(-180px) rotateY(0deg);}
			.big:hover .box5{transform:translateZ(180px) rotateY(0deg);}
			.big:hover .box4{transform:translateY(180px)  rotateX(90deg);}
			.big:hover .box3{transform:translateY(-180px) rotateX(90deg);}	
			.big:hover .box2{transform:translateX(180px) rotateY(90deg);}
			.big:hover .box1{transform:translateX(-180px)rotateY(90deg);}
				
			.box7{text-align: center;/*文字框*/
			line-height:200px;
			animation: dh2 10s infinite linear;}
				
			@keyframes dh2{
             0% {transform: rotateX(0deg) rotateY(0deg)rotateZ(0deg);}
             100% {transform: rotateX(0deg) rotateY(360deg)rotateZ(0deg);}
            }
		</style>
	</head>
	<body>
		
		<div id="dkk">
			<div class="big">
	    <div class="box7">神奇盒子</div>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
		<div class="box6"></div>
		    </div></div>
	</body>
</html>