CSS3 绘制Windows 8 logo

今天的内容非常简单，但有个比较关键的属性：perspective（透视）。所有元素都是放置在z=0的平面上perspective属性设置镜头到元素平面的距离（学过AUTOCAD的童鞋应该很容易理解吧）。是不是还有点云里雾里呢？我们来举个例子，想想你从天上俯看一座金字塔。镜头到元素平面的距离，就是塔的顶部（视点）和地面（Z-平面）之间的距离。

HTML CODE：

<div class="wrapper">
	<div class="logo"></div>
	<div class="logo_text">Windows 8</div>
</div>

CSS CODE：

.wrapper{
	width:860px; height:150px;
	margin:100px auto;
}
.logo {
	position: relative; 
	float: left;
	width: 200px; 
	height: 150px;
	background: #00ADEF;
	-webkit-transform: perspective(400px) rotateY(-25deg);
	-webkit-animation: logo_animation 5s infinite;
	    -moz-animation: logo_animation 5s infinite;
	      -ms-animation: logo_animation 5s infinite;
}
.logo::after{
	content: '';
	background: #F5F5F5;
	width: 10px; height: 100%;
	position: absolute;
	left: 50%; margin-left:-5px;
	top: 0;
}
.logo::before {
	content: '';
	background: #F5F5F5;
	width: 100%; height: 10px;
	position: absolute;
	top: 50%; margin-top: -5px;
	left: 0;
}
.logo_text {
	color: #00ADEF;
	line-height: 150px;
	font-size: 130px;
	font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
	padding-left: 20px;
	float: left;
}

@-webkit-keyframes logo_animation {
	0%, 100% { 
		-webkit-transform: perspective(400px) rotateY(-25deg);
	}
	50% {
		-webkit-transform: perspective(400px) rotateY(-35deg);
	}
}
@-moz-keyframes logo_animation {
	0%, 100% { 
		-moz-transform: perspective(400px) rotateY(-25deg);
	}
	50% {
		-moz-transform: perspective(400px) rotateY(-35deg);
	}
}
@-ms-keyframes logo_animation {
	0%, 100% { 
		-ms-transform: perspective(400px) rotateY(-25deg);
	}
	50% {
		-ms-transform: perspective(400px) rotateY(-35deg);
	}
}

Demo