变形动画

2. 如何使用变形动画?

        transform: 变形函数1 变形函数2 ...;

        使用的前提是借助于过渡动画，才能实现渐变。

        3. 变形函数有哪些？

        3-1. 平移

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

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

        translate()： 2D平移，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

        3-2. 缩放

        scale X和Y的缩放比例

        scaleX()： 指定对象X轴的（水平方向）缩放

        scaleY()： 指定对象Y轴的（垂直方向）缩放

        3-3. 旋转

        rotate(<angle>)：  定义 2D 旋转，在参数中规定角度，单位是deg。

        3-4. 歪斜

        skew(<angle> [, <angle>])： 斜切扭曲，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

        skewX(<angle>)： 指定对象X轴的（水平方向）扭曲

        skewY(<angle>)： 指定对象Y轴的（垂直方向）扭曲

        3-5. 设置原点

        transform-origin: x,y

              默认值：50% 50%  /  center center