css3 3d展现中rotate（）介绍与简单实现

　　　　最近在了解css3的3d动画效果，学习发现，css3中的3d效果实现仍是很好玩的，如今我给你你们简单的介绍一下css3中3d效果的实现。

　　　　我也只是一个初学者，若是在博客中写的不对的地方欢迎指正。

　　　　好了上面啰嗦了半天，如今步入正题，想实现3d效果的实现，最终要的容器属性是transform-style:属性，其中flat默认是2d效果，preserve-3d是3d效果，设置了这个属性它的后代都会表示3d效果，还有另外一个重要属性就是perspective:属性，意思是透视，有个大牛曾说没有透视，不成3d，因此这个属性仍是很重要的，想要熟悉它，咱们就要了解旋转属性，由于rotate属性能够很好的帮助咱们理解perspective：属性，其中rotateX是垂直旋转（我的以为就是上下旋转），rotateY是水平旋转（我的以为就是左右旋转），还有就是rotateZ咳咳，就是旋转Z轴（不知道该怎么描述）不说啦，直接上效果图：

　　　　从上图就能够清楚的看见rotateZ属性的展示形式了吧，

　　　　相关代码：

.divr{
	transform-style: preserve-3d;
	perspective: 600px;
	width: 300px;
	height: 300px;
	background-color: transparent;
	border: 2px solid grey;
	float: left;
	margin: 60px;
	opacity:0.75;	
}
.divrotatex{
	width: 300px;
	height: 300px;
	background-color: darkorchid;
	transform: rotateX(50deg);
}
.divrotatey{
	width: 300px;
	height: 300px;
	background-color: darkorchid;
	transform: rotateY(50deg);
}
.divrotatez{
	width: 300px;
	height: 300px;
	background-color: darkorchid;
	transform: rotateZ(50deg);
	opacity:0.95;
}

　　注：在容器内添加transform-style: preserve-3d;属性和perspective属性，是实现效果的重要属性，其中perspective属性能够有两种书写方式，一种是直接写在父元素内（我的以为就是容器里），第二种就是应用在当前动画元素上。