CSS3高级特效

CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果

变形函数

平移函数

translate平移函数，基于X、Y坐标重新定位元素的位置

两种写法：

transform：translate（100px，100px）

transform：translatey (100px)   translatex (100px)

2D 缩放

Scale缩放函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等

两种写法：

transform:scale(1，2）

                 缩放  缩放大小值  （值正就是放大 负就是缩小 1就是原本大小）

transform:scalex(1）scaley(1）;

2D 倾斜（单位deg）

skew注意是他没有默认值，必须将两个值都写出来。

skewX（）：表示只设置X轴的倾斜

skewY（）：表示只设置Y轴的倾斜

2D 旋转 （单位deg）

rotate(a) 

正数就是顺时针， 负数就是逆时针，且只有一个值，是绕着原来的中心点来旋转的。

小结

rotate( )函数只是旋转，而不会改变元素的形状

skew( )函数是倾斜，元素不会旋转，会改变元素的形状

CSS3动画

CSS3过渡

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

transition-property  过渡或动态模拟的 CSS 属性

transition-duration  完成过渡所需要的时间

transition-timing-function  指定过渡函数

transition-delay   过渡开始出现的延迟时间