变形动画

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():  定义 2D 旋转,在参数中规定角度,单位是deg。


        3-4. 歪斜

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

        skewX(): 指定对象X轴的(水平方向)扭曲

        skewY(): 指定对象Y轴的(垂直方向)扭曲


        3-5. 设置原点

        transform-origin: x,y

              默认值:50% 50%  /  center center


你可能感兴趣的:(变形动画)