CSS3 transform 属性使用详解

作者:     目录: PHP+MySQL     发表: 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

标签:

20 个评论

  1. andcat说道:

    网站不能google订阅?

  2. 看文章 学到了。。哈哈

  3. 园子说道:

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

  4. 辽河油田说道:

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

  5. 1pondo说道:

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

  6. sfengz说道:

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

发表评论