CSS3 transform 属性使用详解

作者:     目录:编程代码     发表:2010年09月14日

transform 本意是变换、改变的意思,在CSS3中transform包括三种含义,分别是rotate(旋转)、skew(扭曲)、scale(缩放)。

1. CSS3 transform – rotate(旋转)

任鸟飞网页设计博客

.transform–rotate {
  -moz-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);}

2. CSS3 transform – skew(扭曲)

任鸟飞网页设计博客

.transform–skew{
  -moz-transform: skew(-25deg);
  -webkit-transform: skew(-25deg);}

3. CSS3 transform – scale(缩放)

任鸟飞网页设计博客

.transform–scale {
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);}

初始图片:

任鸟飞网页设计博客

兼容性

兼容:Chrome、Firefox、Opera等。
不兼容:IE8以下版本

由于IE8以下版本不支持CSS3,要想实现上述的transform(转换)效果,须使用IE滤镜,代码如下:

<!--[if IE]>
<style>
.transform–rotate {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  right:-15px; top:5px;
}
</style>
<![endif]-->

rotation取值[0,1,2,3],依次代表旋转 [0deg,90deg,180deg,270deg],有关BasicImage滤镜的说明请参考 BasicImage filter

标签:

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝红包领取方法:

  • 打开支付宝APP,首页搜索数字 1547638 即可领现金红包
  • 手机用户直接 点击这里领取
  • 或者支付宝APP扫描下面二维码领取
支付宝现金红包 每天可领

6 个评论

  1. andcat says:

    网站不能google订阅?

  2. 园子 says:

    CSS3 我还没有接触过
    看着挺高级的。

  3. 辽河油田 says:

    这篇文章太好了,我先收藏了。

  4. 1pondo says:

    ie各版本的差异性,一直是开发人员的痛处

  5. sfengz says:

    CSS强大啊,有空了好好哦学学

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.