Intro to CSS 3D transforms

原文地址：Intro to CSS 3D transforms，本文只是翻译了其中的一部分，省去了作者写文章的原因浏览器兼容部分（已经过时）

元素需要设置需要设置perspective来激活3D效果，可以通过两种方式实现

• 在transform属性中使用perspective方法

    transform: perspective( 600px );
  

• 直接使用perspective属性

    perspective: 600px;
  

NOTE：出于代码简介的目的，demo中的CSS样式没有使用浏览器前缀，在实际使用中需要使用-webkit-perspective, -moz-perspective, 等

<style>
	.container {
		width: 200px;
		height: 200px;
		border: 1px solid #CCC;
		margin: 0 auto 40px;
	}
	.box {
		width: 100%;
		height: 100%;
	}
	#red1 .box {
	  background-color: red;
	  transform: perspective( 600px ) rotateY( 45deg );
	}
</style>
<section >
	<div class="box red"></div>
</section>