关注前端开发
关注用户体验

CSS3详解:transform

近来,HTML5和CSS3的发展速度还是很可观的,国内外不乏一些大站,酷站都在使用最新的技术。面对新的技术,我们该如何正确的把握和使用到今后的项目实战中呢?针对这一问题,浩子决定剖析CSS3,一一像各位同学解答CSS3到底是个神马东西。就已transform开始吧,写的不好的话,请严重拍砖!!

CSS3 transform是什么?

transform的含义是:改变,使…变形;转换

CSS3 transform都有哪些常用属性?

transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

下面我们来分解各个属性的用法:

transform:rotate():

含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。

点此查看实例展示

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew():

含义:倾斜;

点此查看实例展示

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale():

含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。

点此查看实例展示

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate():

含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

点此查看实例展示

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

transform综合:

transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:

点此查看实例展示

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

CSS3详解:transform为浩子所作,转载请注说明!

未经允许不得转载:大前端 » CSS3详解:transform
分享到:更多 ()

评论 28

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #20

    transform:scale() 在IE上怎么办

    木头2年前 (2015-07-01)回复
    • 办不了,不是为IE而生

      浩子2年前 (2015-07-10)回复
  2. #19

    请问webkit样式怎么同时共存,就是用同时用两个以上的webkit控制样式

    小白2年前 (2015-06-28)回复
    • 你说的应该是同一个属性的情况下写多个值,直接逗号隔开

      浩子2年前 (2015-06-29)回复
  3. #18

    一直没搞明白CSS与CSS3是啥区别。

    夏日博客2年前 (2015-06-24)回复
    • 外行就是多一个3,内行就是用一大坨代码实现前所未有的展示效果

      浩子2年前 (2015-06-27)回复
  4. #17

    dsurdliwtrvwxjropodnw piwcaxx kympmhe hchlokr

    Rodneyssise2年前 (2015-04-25)回复
  5. #16

    超赞,超赞,必须赞

    同盟源2年前 (2015-01-24)回复
  6. #15

    很不错。

    web开发分享3年前 (2014-05-20)回复
  7. #14

    transform:scale()这个缩小后为啥空间还在 有人回答吗

    duoduo3年前 (2014-03-16)回复
    • 空间还在是正常的,scale不会影响周围Dom位置

      浩子3年前 (2014-03-19)回复
  8. #13

    学习了,写的很全面,赞

    张衡Henry3年前 (2013-12-25)回复
  9. #12

    你写的是神马东东,你既然用了css3,干马不用IE10?你的这些代马在IE10能行吗?

    大幅度4年前 (2013-10-18)回复
  10. #11

    楼主,可以帮小弟个忙吗?可以的话 详情qq373107754

    洋芋4年前 (2013-03-04)回复
  11. #10

    😮

    q10178906774年前 (2013-01-23)回复
  12. #9

    scale那段有误。缩小应取0~1之间的值

    哈哈。胡子4年前 (2012-12-01)回复
    • 大于1是放大,小于1是缩小

      sq4年前 (2013-08-01)回复
  13. #8

    我表示谢谢

    东东4年前 (2012-11-25)回复
  14. #7

    ”transform:translate():
    含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。 “这一块描述有点问题,我测试了,向下应该是正,向上为负。也符合w3c的标准。

    闯.漠北5年前 (2012-07-13)回复
    • transform:scale(): 放大是 大于1 缩小是小于1. 负 – ,是颠倒了,向下了,。

      stone4年前 (2013-09-04)回复
  15. #6

    内容都不错,收集起来啦

    cloudyan5年前 (2012-02-23)回复
  16. #5

    同意3楼的兄弟 缩小的方法应该是参数小于1, 给负值的时候会倒过来

    狼儿6年前 (2011-09-14)回复
  17. #4

    IE9支持这个不?

    ling6年前 (2011-08-30)回复
  18. #3

    我觉得, transform:scale(), 缩小的方法应该是参数小于1, 比如0.1, 0.5这样.
    测试的时候负数无效.

    ADD~``6年前 (2011-08-25)回复
  19. #2

    你好可以交换连不啦
    我的网站 http://www.chengxuyuans.com 程序员之家

    程序员之家6年前 (2011-08-02)回复
    • 不好意思,现在不交换友情链接啦

      浩子6年前 (2011-08-02)回复
  20. #1

    页面效果不错,不过我打印的时候无法看到旋转后的图片,不知道大家有没有遇到; ps: 我用的是FF

    test6年前 (2011-07-26)回复

themebetter 国内更好的WordPress主题服务商

立即前往