CSS3的一些属性可能比较新,有一些书从国外翻译到国内的时间上会延缓1-2年。所以有一些东西还需要及时整理。

下面说一下CSS3的一个属性:transform

其实字面上的意思已经很明显了就是变化,变幻的意思。

那到底怎么个变法?

transform可以选下面几个值:

  1. 旋转-rotate(rotatex,rotatey)
  2. 倾斜-skew
  3. 缩放-scale
  4. 移动-translate

下面给出的例子可能都非常简单,真正详细的还是看W3School毕竟是定期更新的


1.rotate

a.rotate{
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);/*没有火狐的前缀,已经规范了*/
}

不知道大家知道不知道这里的20deg是什么意思,deg是度的意思大家都知道。然后20deg就是正向旋转20度,当然也有负向旋转的,上面代码全部改成-10deg之后就是下面这样,看下面:

应该很清楚了,默认的旋转中心是矩形高和宽的中点


2.skew

a.skew{
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);/*没有火狐的前缀,已经规范了*/
}

斜切20度是什么概念?想象用手指从右边推矩形然后矩形像果冻一样倾斜了,倾斜的角度和原来的角度相差20度

CSS3的transform属性-LMLPHP


3.scale

a.scale{
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);/*没有火狐的前缀,已经规范了*/
}

原来的是没放大是下面这样的:


4.translate

a.translate{
-webkit-transform: translate(250px,10px);
-ms-transform: translate(250px,10px);
-o-transform: translate(250px,10px);
transform: translate(250px,10px);/*没有火狐的前缀,已经规范了*/
}

原来的是没移动的时候是下面这样的,可能translateY看不太出来,但是X就非常明显了,translateY的大家脑补一下:


5.transform综合

a.transform:hover{
-webkit-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);
-ms-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);
-o-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);
transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);/*没有火狐的前缀,已经规范了*/
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;/*没有火狐和IE的前缀,已经规范了*/
}

鼠标hover一下你懂的

感觉自己总结的都很水,不过还是方便翻阅和学习的

点击查看原文:原文地址

05-11 22:21