CSS3实现3d、过渡、变化案例

一开始盒子状态：

 过渡过程：

最终形式： 大盒子旋转180deg，小盒子跟着大盒子旋转然后展开。

代码实现 

body模块：

		

			
前
			
后
			
左
			
右
			
上
			
下

			
前
			
后
			
左
			
右
			
上
			
下

		
	

CSS：

body{
			perspective:800px;
		}
		.stage{
			position:relative;
			width:200px;
			height:200px;
			margin:400px auto;
			box-shadow:0 0 15px #000 inset;
			transform-style:preserve-3d;
			transition:2s;
		}
			/*注意：因为position，所有的transform都是相对于父级元素来变化，因此把父级元素设置为舞台。*/
		.stage:hover{
			transform:rotateY(180deg);
		}
		.stage:hover .face5{
			transform:translateZ(100px) translateY(-200px);
				
		}
		.stage:hover .small1{
			transform:translateZ(100px) translateY(-300px);
		}
		.stage:hover .small2{
			transform:rotateY(180deg) translateZ(100px) translateY(-300px);
		}
		.stage:hover .small3{
			transform:rotateY(-90deg) translateZ(100px) translateY(-300px);
		}
		.stage:hover .small4{
			transform:rotateY(90deg) translateZ(100px) translateY(-300px);
		}
		.stage:hover .small5{
			transform:rotateX(90deg) translateZ(400px);
		}
		.stage:hover .small6{
			transform:rotatex(-90deg) translateZ(-200px);
		}
		.face{
			position:absolute;
			width:200px;
			height:200px;
			box-shadow:0 0 20px #554ee9 inset;
			transition:2s;
		}
		.small{
			position:absolute;
			right:50px;
			bottom:0px;
			width:100px;
			height:100px;
			box-shadow:0 0 5px #000 inset;
			transition:2s;
		}
		.face1{
			transform:translateZ(100px);
		}
		.face2{
			transform:rotateY(180deg) translateZ(100px);
		}
		.face3{
			transform:rotateY(-90deg) translateZ(100px);
		}
		.face4{
			transform:rotateY(90deg) translateZ(100px);
		}
		.face5{
			transform:rotateX(90deg) translateZ(100px);
		}
		.face6{
			transform:rotatex(-90deg) translateZ(100px);
		}
		.small1{
			transform:translateZ(50px);
		}
		.small2{
			transform:rotateY(180deg) translateZ(50px);
		}
		.small3{
			transform:rotateY(-90deg) translateZ(50px);
		}
		.small4{
			transform:rotateY(90deg) translateZ(50px);
		}
		.small5{
			transform:rotateX(90deg) translateZ(50px);
		}
		.small6{
			transform:rotatex(-90deg) translateZ(50px);
		}