美文网首页css属性
transform与transition

transform与transition

作者: jacklin1992 | 来源:发表于2016-08-26 22:47 被阅读9次

    transform

    transform 为css属性,主要用于元素的变形处理

    属性:translate,rotate scale skew
    分别为 平移 旋转 缩放 斜切

    translate:指定对象的2D translation(2D平移)。第一个参数为对应的X轴,第二个参数为对应的Y轴。如果第二个参数未提供,则默认为0.
    例如: transform:translate(10px,10px)
    X 轴 正值 向右 Y轴 正值向下

    rotate:指定对象的2D旋转,需现有transform-origin属性的定义。
    例如:rotate(90deg),transform-origin:0 0;
    不设置transform-origin则默认为旋转点为中心。 顺时针旋转

    scale: 指定对象的2D缩放,第一个参数对应X轴,第二个参数对应Y轴,如果第二个参数未提供,默认取第一个参数的值。
    例如:scale(0.5,0.5) 参数为为相对对象的尺寸倍数,假如买有设置transform-origin,默认缩放中心为对象中心,设置之后图像朝着中心点缩放。

    skew:指定对象的斜切扭曲。第一个参数对应X轴角度,第二个参数对应Y轴角度。
    假如第二个参数为提供,默认为0.
    例如:skew(50deg,20deg)

    transition

    transition 为css3属性,主要用于元素的过度动画处理

    属性:property, duration,timing-function,delay

    property:检索或设置对象中的参与过度的属性。
    duration:动过过度的持续时间长度
    timing-function:检索或设置对象中过度的动画类型。(linear线性,ease缓慢,ease-in慢速度进入,ease-out慢速度结束,ease-in-out慢速度进入最后再慢速度结束)
    delay:检索或者设置对象延迟过度的时间。

    相关文章

      网友评论

        本文标题:transform与transition

        本文链接:https://www.haomeiwen.com/subject/yznjjttx.html