[Css3教程]-CSS3特效之转换:transform

今天我们一起来探讨一下CSS3中的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:https://csswang.com/f90; 
	-webkit-transform:rotate(30deg); 
	-moz-transform:rotate(30deg); 
	transform:rotate(30deg); //顺时针旋转30度
}

二、缩放scale

scale-1{ /*缩小*/
	display:inline-block; 
	width:100px; 
	height:100px; 
	line-height:100px; 
	text-align:center; 
	background-color:https://csswang.com/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:https://csswang.com/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

/*元素的非变形属性省略不写*/
.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

.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);
}

推荐相关阅读:

1. [Css3教程]-CSS3 Gradient 渐变
2. [Css3教程]-CSS3 RGBA颜色
3. [Css3教程]-CSS3圆角-border-radius
4. [Css3教程]-CSS3文字阴影—text-shadow

本文链接：» https://www.csswang.com/html5-css3/4243

转载请注明本文来源出处。