css3 旋转特效

今天试着玩玩css3的3d旋转特效。

我的思路是先创建单个的div，看旋转特效。

首先是dom：创建一个简单的容器

		<div class="wrap"> 
				<div class="square">
					test
				</div> 
		</div>

css3旋转的思路是，将父元素创建3d效果载体，用3d效果来解释子元素。

.wrap{
	margin:0  600px;
	perspective:800px;
	persepctive-origin: 50% 100px;
	width:200px;
	transform-style:preserve-3d;
}
 

这里一个比较新鲜的属性，perspective，意思是透视，W3上解释这个属性定义3d元素距视图的距离，有这个属性修饰后，子元素会获得透视效果。

然后修饰我们要进行3d变换的div：

.square{
    position: absolute;
    width:200px;
    height:200px;
    background-color:#ccc;
}

然后进行渐变：

.square{
	transform:rotateX(90deg);
}

tranform属性可以让元素在x.y.z轴进行旋转，我逐个做了测试：

transform:rotateX(90deg) 让元素在x轴进行旋转角度，以屏幕的平面为原点，从下往上进行旋转。

transform:rotateY(90deg) 让元素在y轴进行旋转角度，以屏幕为平面的原点，从左往右进行旋转。

transform:rotateZ(90deg) 让元素在z轴进行旋转角度，以屏幕为平面的原点，顺时针旋转。