CSS3欲速则不达—Transfrom(2D变形)

Transfrom(变形)是CSS3中的新属性,Transfrom有旋转rotate、扭曲skew、缩放scale和移动translate几种变形。还有一种是矩阵变形matrix,无论是旋转还是拉伸什么的,本质上都是应用的matrix()方法实现的,因为讲解矩阵又要很长篇幅,所以不重点讲解。今天我们只来关心易于理解的旋转rotate、扭曲skew、缩放scale和移动translate几种变形,还有transform-origin 改变元素运动基点

Transfrom(变形)

        transform:none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<<angle>) || skewY(<angle>)?
        /* 实际用法*/
        -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);//chrome1.0x+ safari3.1+
        -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);//firefox3.5+
        -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);//opera 10.5+
        -ms-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);//IE9+
        transform: rotate(4deg) scale(1) skew(1deg) translate(10px);//W3C标准
        
Transfrom(变形)基本语法

Transfrom(变形)取值

  • translate(<length>[, <length>])

    指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

    • translateX(<length>):指定对象X轴(水平方向)的平移
    • translateY(<length>):指定对象Y轴(垂直方向)的平移
  • rotate(<angle>)

    指定对象的2D rotation(2D旋转),按照 ransform-origin 属性的定义为基点,默认为 center,center

  • scale(<number>[, <number>])

    指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

    • scaleX(<number>):指定对象X轴的(水平方向)缩放
    • scaleY(<number>):指定对象Y轴的(垂直方向)缩放
  • skew(<angle> [, <angle>])

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

    • skewX(<angle>):指定对象X轴的(水平方向)扭曲
    • skewY(<angle>):指定对象Y轴的(垂直方向)扭曲
  • matrix(<number>,<number>,<number>,<number>,<number>,<number>):

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

代码有点长,就直接上DEMO了

  • Translate
  • TranslateX
  • TranslateY
  • Rotate
  • Scale
  • ScaleX
  • ScaleY
  • Skew
  • SkewX
  • SkewY
  • Matrix
Transfrom基本实例

transform-origin(改变元素基点)

            transform-origin:[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]?
            /* 实际用法*/
            -webkit-transform-origin:top left;//chrome1.0x+ safari3.1+
            -moz-transform-origin:top left;//firefox3.5+
            -o-transform-origin:top left;//opera 10.5+
            -ms-transform-origin:top left;//IE9+
            -transform-origin:top left;//W3C标准
        
transform-origin语法

transform-origin取值

transform-origin:用来设置元素的运动的基点,默认点是元素的中心点。

  • <percentage>:用百分比指定坐标值。可以为负值。
  • <length>:用长度值指定坐标值。可以为负值。
  • left:指定原点的横坐标为left
  • center:指定原点的横坐标为center
  • right:指定原点的横坐标为right
  • top:指定原点的纵坐标为top
  • center:指定原点的纵坐标为center
  • bottom:指定原点的纵坐标为bottom

left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%;top center bottom是垂直方向的取值,对应的百分值为top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变

本文源链接:http://www.html5jscss.com/css3-2d-transfrom.html

转载请注明《CSS3欲速则不达—Transfrom(2D变形)》| html5jscss

评论关闭了.