今天试着玩玩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轴进行旋转角度,以屏幕为平面的原点,顺时针旋转。