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屬性能夠有兩種書寫方式，一種是直接寫在父元素內（我的以爲就是容器裏），第二種就是應用在當前動畫元素上。