css3-transfrom

CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.

以上是W3C官方解释，翻译过来大概意思就是：transforms 可以让元素的css在二维或者三维空间变化。

Transition

1
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>)?
1
2
3
4
5
6
/* 实际用法*/
-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标准

Transform 属性中如果提供多个属性值，都是以逗号（“，”）隔开。

Transfrom（变形）取值

  • translate([, ])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
  • translateX()：指定对象X轴（水平方向）的平移
  • translateY()：指定对象Y轴（垂直方向）的平移
  • rotate()：指定对象的2D rotation（2D旋转），按照 ransform-origin 属性的定义为基点，默认为 center,center
  • scale([, ])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
  • scaleX()：指定对象X轴的（水平方向）缩放
  • scaleY()：指定对象Y轴的（垂直方向）缩放
  • skew( [, ])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
  • skewX()：指定对象X轴的（水平方向）扭曲
  • skewY()：指定对象Y轴的（垂直方向）扭曲
  • matrix(,,,,,)：以一个含六值的(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

transform-origin（改变元素基点）

1
2
3
4
5
6
7
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标准
  • ：用百分比指定坐标值。可以为负值。
  • ：用长度值指定坐标值。可以为负值。
  • 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%;如果只取一个值，表示垂直方向值不变