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。
网站不能google订阅?
看文章 学到了。。哈哈
CSS3 我还没有接触过
看着挺高级的。
这篇文章太好了,我先收藏了。
ie各版本的差异性,一直是开发人员的痛处
CSS强大啊,有空了好好哦学学