首页 > Web开发 > 详细

css3整理--transform

时间:2014-03-26 10:08:09      阅读:403      评论:0      收藏:0      [点我收藏+]

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%

css3整理--transform,布布扣,bubuko.com

css3整理--transform

原文:http://www.cnblogs.com/charling/p/3622364.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!