2D转换

转换是CSS3

中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中，通过transform(变形) 来实现2d 或者3d 转换,其中2d 有，缩放，移动，旋转。

1）缩放scale(x,y)可以对元素进行水平和垂直方向的缩放x,y取值可为小数，不可违负值。

2）移动translate(x,y)可以改变元素的的位置，x,y可为负值；

x在水平方向移动

y在垂直方向移动。

3) 旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；

案例1:火箭移动

rocket {

width:100px;

height:190px;

//吧火箭定位到左下角

position:absolute;

bottom:0;

//把火箭水平移动100培训，向下移动175px 旋转30deg

transition:all 1s ;

}

section:hover .rocket {

//移动到section区域，吧rocket向右移动960px

transform:translate(960px,-250px) rotate(30deg);

}

案例2：旋转 原点

transform-origin:left top;