//渐显效果
body{-webkit-animation:mainbox 1s 1;}
@-webkit-keyframes mainbox{
from{transform:scale(0.5);filter:alpha(opacity=0);opacity:0;}
to{transform:scale(1);filter:alpha(opacity=100);opacity:1;}
}
//右边滑出
.packcon{-webkit-animation:tibox 0.6s 1;}
@-webkit-keyframes tibox{from{right:-300px}to{right:0px}}


//底部滑出
#popupbox .con{-webkit-animation:popcont 0.6s 1;}
@-webkit-keyframes popcont{from{bottom:-300px}to{bottom:0px}}


1 transform属性
在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。


（1）浏览器支持


到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。?


2 旋转
使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。


transform:rotate(45deg);


/*水平翻转*/
transform: rotateY(180deg); 


/*垂直翻转*/
 transform: rotateX(180deg); 




3 缩放?
使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。


transform：scale（0.5）；//缩小一半


（1）可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率


transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。


4 倾斜?
使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。


transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。


（1）只使用一个参数，省略另一个参数


这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。


transform：skew（30deg）；


5 移动
使用translate方法来移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。


transform:translate(50px,50px);  // 水平方向上移动50px，垂直方向上移动50px


（1）只使用一个参数，省略另一个参数


这种情况下视为只在水平方向上移动，垂直方向上不移动。


transform:translate(50px);


6 对一个元素使用多种变形的方法
transform：translate（150px，200px） rotate（45deg） scale（1.5）；


7 指定变形的基准点
在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。


transform-origin属性
使用该属性，可以改变变形的基准点。


transform：rotate（45deg）；


transform-origin：left bottom；//把基准点修改为元素的左下角


（1）指定属性值


基准点在元素水平方向上的位置：left、center、right


基准点在元素垂直方向上的位置：top、center、bottom