css3:2D与动画

2D转换：

位移，缩放，旋转，斜切（-webkit-transform）

 

位移：未设置坐标原点时，以浏览器左上角为坐标原点发生位移。

-webkit-transform:translate(   );

 

缩放：参照元素中心进行缩放其语法如下

-webkit-transform：scale(.像素,.像素);

 

旋转：旋转方式：度数（deg），弧度。按元素中心顺势针旋转。也可为元素设置坐标（垂直方向为x轴）

-webkit-transform：rotate(45deg);表示该元素绕原点顺时针旋转45度

可利用-origin语句来改变旋转的参照点，重置原点

-webkit-transform-origin:x px,y px;

 

斜切：也叫扭曲。以垂直方向为x轴。

-webkit-transform：skew(xrad,yrad);

 

过度

-webkit-transition:width(针对过度属性)   4s（过度周期及时间） ease（过度效果类型） 2s（延时）

过度类型：

• ：linear线性过度
• ：ease平滑过度
• ：ease-in由慢到快过度
• ：ease-out由快到慢过度
• :ease-in-out由慢到快再到慢

　动画:animation

@-webkit-keyframes （为解决浏览器兼容性问题以谷歌浏览器为例）

　　

@-webkit-keyframes myfirst {
0% {
width: 150px;
}

30% {
width: 300px;                                       /*动画过度的百分比以及过度时像素的变化，像素变化越小动画越流畅*/
}

50% {
width: 500px;
}

100% {
width: 600px;
}
}

.div1 {
width: 150px;　　　　　　　　　　　　/*为div1定义宽高延时，过度的类型以及循环*/
height: 150px;
background-color: #21bbca;
-moz-animation: myfirst 4s ease infinite（无限循环）;
}