7月13号CSS3学习总结

2D转换: 位移, 缩放, 旋转, 斜切

位移 ：

-webkit-transform: translate(10px, 10px);

缩放：

-webkit-transform: scale(.5, .5);

重置原点：

-webkit-transform-origin: 50px 0;

旋转:  deg表示度数

-webkit-transform: rotate(1deg);

斜切,扭曲：

-webkit-transform: skew(1rad, 1rad)；

过渡：线性过渡，平滑过渡，由慢到快，由快到慢，由慢到快再到慢

线性过渡：

-webkit-transition: all 4s linear;

平滑过渡：

-webkit-transition: all 4s ease;

由慢到快：

-webkit-transition: all 4s ease-in;

由快到慢：

-webkit-transition: all 4s ease-out;

由慢到快再到慢：

-webkit-transition: all 4s ease-in-out;

动画：

设置动画每一部分的效果：

@keyframes 动画名  {

30% {

效果

}

50% {

效果

}

100% {

效果

}

}

将动画呈现出来：

/*-webkit-animation: myfirst 4s ease infinite;*/