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

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为浩子所作,转载请注说明!

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

评论 40

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

    Unpredictability is essential in comedy, and the best part of Horrible Bosses is how it can remain one step ahead of you while still giving plenty to laugh about.

  2. #31

    Very nice style and design and wonderful content material , practically nothing else we need : D.

  3. #30

    Can I just say thats a relief to seek out someone that actually knows what theyre referring to on the net. You actually realize how to bring a challenge to light and work out it critical. Lots more people ought to check out this and see why side on the story. I cant believe youre no more common simply because you absolutely develop the gift.

  4. #29

    hello there and thank you for your information – I have certainly picked up anything new from right here. I did however expertise a few technical points using this site, since I experienced to reload the site many times previous to I could get it to load properly. I had been wondering if your web hosting is OK? Not that I’m complaining, but slow loading instances times will often affect your placement in google and could damage your high quality score if advertising and marketing with Adwords. Anyway I am adding this RSS to my email and could look out for much more of your respective fascinating content. Make sure you update this again soon..

    Cleo Punch1周前 (05-15)回复
  5. #28

    I like what you guys are up also. Such intelligent work and reporting! Carry on the excellent works guys I’ve incorporated you guys to my blogroll. I think it will improve the value of my site

  6. #27

    I can’t really help but admire your blog, your blog is so adorable and nice ,  

    cat care2周前 (05-08)回复
  7. #26

    Nice post! Thank you.

    gezichtsbehandeling1个月前 (04-17)回复
  8. #25

    Very good info. Lucky me I recently found your site by accident (stumbleupon). I’ve saved it for later!

    Apex Legends Season 12个月前 (03-31)回复
  9. #24

    This is a right blog for anyone who desires to discover this topic. You understand a great deal its nearly difficult to argue on hand (not that I personally would want…HaHa). You certainly put a new spin using a topic thats been discussing for several years. Wonderful stuff, just excellent!

    my singing monsters2个月前 (03-28)回复
  10. #23

    All other webmasters should make note: this is what great posts look like! I can’t wait to read more of your writing! Not only is it thoughtful, but it is also well-written. If you could respond with a link to your Facebook, I would be extremely grateful!

    Zelda Compono3个月前 (03-11)回复
  11. #22

    kan riben pian 辣女啵 wwwlanvbocom

    112年前 (2017-07-11)回复
  12. #21

    我在谷歌测试的,有几个问题,不知道对不对啊,1.放大的话,可以直接使用2,并不会变成负的。2.位移的话,右下是正的,左上才是负的,待会我去查一下文档,但是还是想留个言,啊哈哈

    程小维2年前 (2017-05-10)回复
  13. #20

    transform:scale() 在IE上怎么办

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

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

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

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

      浩子4年前 (2015-06-29)回复
  15. #18

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

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

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

    dsurdliwtrvwxjropodnw piwcaxx kympmhe hchlokr

    Rodneyssise4年前 (2015-04-25)回复
  17. #16

    超赞,超赞,必须赞

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

    很不错。

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

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

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

      浩子5年前 (2014-03-19)回复
  20. #13

    学习了,写的很全面,赞

    张衡Henry5年前 (2013-12-25)回复
  21. #12

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

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

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

    洋芋6年前 (2013-03-04)回复
  23. #10

    😮

    q10178906776年前 (2013-01-23)回复
  24. #9

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

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

      sq6年前 (2013-08-01)回复
  25. #8

    我表示谢谢

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

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

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

      stone6年前 (2013-09-04)回复
  27. #6

    内容都不错,收集起来啦

    cloudyan7年前 (2012-02-23)回复
  28. #5

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

    狼儿8年前 (2011-09-14)回复
  29. #4

    IE9支持这个不?

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

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

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

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

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

      浩子8年前 (2011-08-02)回复
  32. #1

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

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

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

立即前往