Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>立方体</title>
	<style>
		/*为什么两层div包裹各面后，旋转时不会出现畸变？*/
		.magic{
			position: absolute;/*子元素的绝对定位首先寻找已定位的父元素作参照。*/
			top: 50%;/*只有absolute才有top和left等值。	*/
			left:50%;
			width: 300px;
			height: 300px;/*在这里设置了父元素的宽高，会继承给子元素。*/
			margin: -150px;/*注意这个margin的使用方法，他让元素居中。*/
			perspective:1000px;/*让里面的元素均可透视。*/
		}
		.magic .cube{
			position: absolute;/*使其能够继承父元素信息。*/
			width: 100%;
			height: 100%;
			transform-style:preserve-3d;/*保留子元素3d效果。*/
			/*perspective-origin:50% 35%;这个属性并不重要，为什么？*/
			animation:rotate 3s 12s linear infinite both;
		}

		.magic .cube>div{
			position: absolute;
			width: 100%;
			height: 100%;
			box-sizing:border-box;/*将边框收入内容区，有什么用？*/
			border:1.2px solid black;/*这里指定了所有div的边框属性，选择器保障了特殊性，也无关继承*/
			transition:1s linear;
			text-align: center;
			font: 50px serif;
			/*line-height: 300px;为什么这里的line-height值无效？*/
		}

		.magic .cube .front{/*注意这里的选择器使目标元素更特殊。*/
			animation:front 2s 10s linear both;/*注意这个linear属性的设置。*/
			line-height: 300px;
		}

		.magic .cube .right{
			animation:right 2s 4s linear both;
			line-height: 300px;
		}

		.magic .cube .left{
			animation:left 2s 6s linear both;
			line-height: 300px;
		}

		.magic .cube .back{
			animation:back 2s 8s linear both;
			line-height: 300px;
		}

		.magic .cube .top{
			animation:top 2s linear both;
			line-height: 300px;
		}

		.magic .cube .bottom{
			animation:bottom 2s 2s linear both;
			line-height: 300px;
		}

		.magic:hover .cube>div{/*注意这里选择器的用法。*/
			border-color:rgba(0,0,0,0);color:#fff;
		}

		.magic:hover .cube .top{
			background:rgba(255,255,0,0.8);
		}

		.magic:hover .cube .left{
			background:rgba(0,255,0,0.8);
		}

		.magic:hover .cube .bottom{
			background:rgba(0,255,255,0.8);
		}

		.magic:hover .cube .right{
			background:rgba(255,0,0,0.8);
		}

		.magic:hover .cube .front{
			background:rgba(0,0,255,0.8);
		}

		.magic:hover .cube .back{
			background:rgba(255,0,255,0.8);
		}

		@keyframes top{
			100%{transform:rotateX(90deg) translateZ(150px);/*注意这里两个动画没有任何符号连接！*/
			}
		}

		@keyframes bottom{
			100%{
				transform:rotateX(-90deg) translateZ(150px);
			}
		}

		@keyframes right{
			100%{
				transform:rotateY(90deg) translateZ(150px);
			}
		}

		@keyframes left{
			100%{
				transform:rotateY(-90deg) translateZ(150px);
			}
		}

		@keyframes back{
			100%{
				transform:rotateY(180deg) translateZ(150px);
			}
		}

		@keyframes front{
			100%{
				transform:translateZ(150px);
			}
		}

		@keyframes rotate{
			100%{
				transform:rotate3D(1,1,1,360deg);/*注意这个rotate值的设定。*/
			}
		}
	</style>
</head>
<body>
	<div class="magic">
		<div class="cube">
			<div class="front">front</div>
			<div class="right">right</div>
			<div class="back">back</div>
			<div class="left">left</div>
			<div class="top">top</div>
			<div class="bottom">bottom</div>
		</div>
	</div>
</body>
</html>