CSS3特效之转换transform

transform

语法

transform: none| rotate | scale | skew | translate | matrix;
通过transform-origin可以设置转换参考位置，默认值为50% 50%,即 center center
1.rotate(<angle>)：旋转，参照转换中心旋转，如transform:rotate(60deg);
2.scale(<number>[, <number>])：缩放，参数1表示沿X轴方向缩放，参数2表示沿Y轴方向缩放，如果只提供一个参数，则第二个参数值与第一个相等，相关属性：scaleX(<number>), scaleY(<number>)
3.translate(<length>[, <length>])：平移，参数1表示沿X轴方向平移，参数2表示沿Y轴方向平移，如果只提供一个参数，则第二个参数值为0，相关属性：translateX(<length>), translateY(<length>)
4.skew(<angle>[,<angle>]):扭曲，参数1表示沿X轴方向扭曲，参数2参数表示沿Y轴方向扭曲，如果只提供一个参数，则第二个参数为0，相关属性：skewX(<angle>), skewY(<angle>)
5.matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

一、旋转rotate

.rotate-1{ 
	width:100px;
	height:100px; 
	background-color:#f90; 
	-webkit-transform:rotate(30deg); 
	-moz-transform:rotate(30deg); 
	transform:rotate(30deg); //顺时针旋转30度
}

二、缩放scale

默认状态

 

缩小50%

 

放大50%

.scale-1{ /*缩小*/
	display:inline-block; 
	width:100px; 
	height:100px; 
	line-height:100px; 
	text-align:center; 
	background-color:#66f; 
	-webkit-transform:scale(0.5, 0.5); 
	-moz-transform:scale(0.5, 0.5); 
	transform:scale(0.5, 0.5);
}
.scale-2{ /*放大*/
	display:inline-block; 
	width:100px; 
	height:100px;
	line-height:100px;
	margin-left:20px; 
	text-align:center;
	background-color:#66f; 
	-webkit-transform:scale(1.5, 1.5); 
	-moz-transform:scale(1.5, 1.5);
	transform:scale(1.5, 1.5);
}
/*说明：如果X,Y轴 缩放的倍数一致的话，也可以只写一个值，如：transform:scale(0.8);
也可以通过scaleX(<number>), scaleY(<number>)来分别设置X,Y轴的缩放情况*/

三、移动translate

默认状态

 

向右偏移10

 

向上左各偏移10

/*元素的非变形属性省略不写*/
.translate-2{ /*向右偏移10px*/
	-webkit-transform:translate(10px); 
	-moz-transform:translate(10px); 
	transform:translate(10px);
}
 
.translate-3{ /*向上左各偏移10*/
	-webkit-transform:translate(-10px, -10px); 
	-moz-transform:translate(10px, -10px); 
	transform:translate(10px, -10px);
}
/*说明：translate属性与scale属性有所不同，如果只给一个值的话，默认第二个值为0
也可以通过translateX(<number>), translateY(<number>)来分别设置X,Y轴的移动情况*/

四、扭曲skew

无扭曲

 

X:扭曲30

 

Y:扭曲10

 

Y:扭曲(30.10)

.skew-1{ /*沿X方向扭曲30deg*/
	-webkit-transform:skew(30deg); 
	-moz-transform:skew(30deg); 
	transform:skew(30deg);
}
.skew-2{ /*沿Y方向扭曲10deg*/
	-webkit-transform:skew(0, 10deg);
	-moz-transform:skew(0,10deg); 
	transform:skew(0,10deg);
}
.skew-3{ /*沿X、Y方向分别扭曲30deg, 10deg*/
	-webkit-transform:skew(30deg, 10deg); 
	-moz-transform:skew(30deg, 10deg); 
	transform:skew(30deg, 10deg);
}