css3 3d 盒子02 - 码农教程

<!DOCTYPE html>
<html>
<head>
	<title>boc</title>

	<!-- 
		写法思路，就是，让每个面都按照3d 盒子的中心点旋转！
		所以要修改中心点的位置!			
	 -->
	<style type="text/css">
		*{
				padding: 0;
				margin: 0;
			}


			html,body{
				height: 100%;
				overflow: hidden;
			}
			.box{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 600px;
				height: 600px;
				border: 1px solid;
				perspective: 200px;
			}



			.box .inner{
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -100px;
					margin-top: -100px;
					width: 200px;
					height: 200px;
					background-color: pink;
					transition : 3s transform;
					transform-origin: center center -100px; 
					transform-style: preserve-3d;
			}

			.inner div{
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				text-align: center;
				font: 30px/200px 微软雅黑;
				background-color: pink;	
				transform-origin: center center -100px; 			
			}

			/*//下面旋转就行了，不需要展开了！*/
		
			.inner div:nth-child(2){
				transform: rotateX(90deg);
			}
			.inner div:nth-child(3){
				transform: rotateX(270deg);
			}
			.inner div:nth-child(4){
				transform: rotateX(180deg);
			}
			.inner div:nth-child(5){
				transform: rotateY(90deg);
			}
			.inner div:nth-child(6){
				transform: rotateX(270deg);		
			}
			.inner div:nth-child(1){	

			}

			.box:hover .inner{
				transform: rotateX(360deg);
			}

	</style>
</head>
<body>

		<div class="box">
			<div class="inner">
				<div class="div2">2</div>	
				<div class="div3">3</div>	
				<div class="div4">4</div>	
				<div class="div5">5</div>	
				<div class="div6">6</div>
				<div class="div1">1</div>		
			</div>
		</div>
</body>
</html>
我要说的是
景深是在父容器中加的！
上面的逻辑就是按照盒子中心点进行旋转！