CSS变形、CSS过渡、CSS动画

目录

 一、CSS变形(transform)

二、CSS过渡

三、CSS动画

1.创建动画

2.动画的属性

---

 一、CSS变形(transform)

1、CSS3中实现变形的优点：

        (1)不需要加载额外的文件(flash文件)
        (2)提供开发效率
        (3)提高页面的执行速度

2、用法：
        transform:none | transform-function
        transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。      

3、变形函数：

transform-function函数

(1)matrix(<number>,<number>,<number>,<number>,<number>,<number>)： 
        以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于
        直接应用一个[a,b,c,d,e,f]变换矩阵

(2)transform:translate（x-value,y-value）; 指定对象的2D translation(2D平移)。
        x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如    果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。 

        translateX(<length>)： 指定对象X轴（水平方向）的平移 

        translateY(<length>)： 指定对象Y轴（垂直方向）的平移   

(3)transform:scale(x-axis,y-axis); 指定对象的2D scale（2D缩放）。
        x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。

(4)transform:skew(x-angle,y-angle); 指定对象skew transformation（斜切扭曲）。第一个参数表示相对于X轴
        参数x-angle和y-angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。
        单位是deg,表示角度