变形动画

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


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容