css3整理--transform

transform语法:

  transform : none | <transform-function> [ <transform-function> ]*

    none为默认值,表示不进行变换

    n个transform-function表示进行n种不同的变换。包括:rotate | scale | skew | translate |matrix;(每种变换中间用逗号分开)

  transform:rotate(30deg)  // 沿中心顺时针旋转30度

  transform:translate(100px,20px) // 沿X轴向右移动100px,沿Y轴向下移动20px,同transform:translateX(100px);transform:translateY(20px)

  transform:scale(2,1.5) // X轴方向缩放两倍,Y轴方向缩放1.5倍,同transform:scaleX(2);transform:scaleY(2)

  transform:skew(30deg,10deg) // X轴方向扭曲30度,Y轴方向扭曲10度,同transform:skewX(30deg);transform:skewY(10deg)

  

transform-origin,用来改变元素进行transform时的基点。

  语法:transform-origin(X,Y),x、y指定基点位置。同background-position的设置一样

  1、top left | left top 等价于 0 0 | 0% 0%

  2、top | top center | center top 等价于 50% 0

  3、right top | top right 等价于 100% 0

  4、left | left center | center left 等价于 0 50% | 0% 50%

  5、center | center center 等价于 50% 50%(默认值)

  6、right | right center | center right 等价于 100% 50%

  7、bottom left | left bottom 等价于 0 100% | 0% 100%

  8、bottom | bottom center | center bottom 等价于 50% 100%

  9、bottom right | right bottom 等价于 100% 100%

posted @ 2014-03-25 08:55  charling  阅读(190)  评论(0编辑  收藏  举报