前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了。
a)再提一提transform的四个属性
①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针。
②缩放--->scale(参数a),单位1,也就是“没有单位”,赤裸裸的0-1之间的数字就行,表示为缩放比例。
③倾斜--->skew(参数a,参数b),单位deg,两个参数分别表示x,y方向上的倾斜角度,正数顺时针,负数逆时针。
④移动--->translate(参数a),单位px,移动方向是在div这个平面方向上(这样说起来,应该有点难理解,放在四维坐标中,把div看做是任意一个平面来理解),也有正数之分,正向前,负向后。
1)旋转(rotate),我们先来做一个文字的旋转,就像下面这样
/* HTML */ <div class="div1">我只是一个示例</div>
然后再给它写点样式
1 /* CSS */ 3 .div1 { 4 width: 200px; 5 height: 50px; 6 font-size: 20px; 7 line-height: 50px; 8 text-align: center; 9 border: 1px solid; 10 margin: 100px auto; 11 -moz-transform: rotate(45deg);/* Firefox 旋转属性,参数表示角度(deg表示角度),负数逆时针,正数顺时针 */ 12 -webkit-transform: rotate(45deg);/* Safari和Chrome */ 13 -ms-transform: rotate(45deg);/* IE 9 */ 14 -o-transform: rotate(45deg);/* Opera */ 15 }
这是效果图:下图是一行文字,被顺时针旋转45度后的效果图。
2)缩放(scale)
1 /* HTML */ 2 <div class="div2">我只是一个示例&l