web前端学习

概述

在CSS中，用于实现元素2D或3D转换的属性主要是transform。利用该属性可以定义元素的移动、旋转、缩放或倾斜。其语法格式如下： transform:none|translate()|scale()|rotate()|skew(); 本节分别讲解进行2D和3D转换时，transform属性常用参数的应用。

属性值	释义
none	无2D转换
translate()	定义元素在水平和垂直两个方向的平移量
scale()	定义元素在X轴和Y轴方向的缩放倍数
rotate()	定义元素的旋转角度，正值为顺时针旋转，负值为逆时针旋转
skew()	定义X轴和Y轴方向上的倾斜角度

1.平移参数translate

参数作用：定义元素在水平和垂直两个方向的平移量。对于水平方向，向右平移为正，向左平移为负；对于垂直方向，向下平移为正，向上平移为负。应用格式：选择器{transform:translate(translateX,translateY);} 选择器{transform:translateX(translateX);} 选择器{transform:translateY(translateY);} 选择器{transform:translateX(translateX) translateY(translateY);} （1）括号中translateX、translateY分别用于定义水平和垂直两个方向的平移量。（2）translate之后的括号中只有一个参数时，表示水平平移量。

	
.twoD_test_father:hover>#twoD_test1{
	transform: translate(200px,50px);
}

2.缩放参数scale

参数作用：用于定义元素的缩放。应用格式：选择器{transform:scale(scaleX,scaleY);} 选择器{transform:scaleX(scaleX);} 选择器{transform:scaleY(scaleY);} 选择器{transform:scaleX(scaleX) scaleY(scaleY);} 选择器{transform:scaleX(scaleX) scaleY(scaleY);} （1）括号中的scaleX、scaleY分别用于定义元素在X轴和Y轴方向的缩放倍数，参数可以是正数、负数和小数。大于1为放大；小于1为缩小。负数表示翻转。（2）如果scale之后的括号中只写一个参数，表示X轴和Y轴两个方向的值相同。

	
.twoD_test_father:hover>#twoD_test2{
	transform: scale(1.5,1.5); 
}

3.旋转参数rotate

参数作用：定义元素的旋转角度。应用格式：选择器{transform:rotate(angle);} （1）angle表示要旋转的角度，单位为deg。正值为顺时针旋转，负值为逆时针旋转。（2）旋转轴心默认为图形中心。

	
.twoD_test_father:hover>#twoD_test3{
	transform: rotate(20deg);
}

4.倾斜参数skew

参数作用：定义元素的倾斜角度。应用格式：选择器{transform:skew(skewX,skewY);} 选择器{transform:skewX(skewX);} 选择器{transform:skewY(skewY);} 选择器{transform:skewX(skewX) slewY(skewY);} （1）括号中的skewX和skewY分别表示元素在X轴和Y轴方向上的倾斜角度，单位为deg。值可以是正值和负值，正值为逆时针方向，负值为顺时针方向。（2）如果在skew之后的括号中只写一个参数，表示X轴的倾斜角度。（3）默认轴心为图形中心。

	
.twoD_test_father:hover>#twoD_test4{
	transform: skew(30deg,5deg);
}

5.转换基点transform-origin

参数作用：定义缩放、旋转、倾斜的基点。应用格式：选择器{transform-origin:X,Y;} （1）X、Y默认值均为50%。（2）X的值可以是left、right、center、长度和百分比。（3）Y的值可以是top、bottom、center、长度和百分比。

	
.twoD_test_father:hover>#twoD_test5{
	/* transform-origin: left top; */
	transform-origin: 0% 0%;
	transform: scale(2,2); 
}

6.转换一起使用

参数作用：定义缩放、旋转、倾斜的基点。应用格式：选择器{transform-origin:X,Y;} （1）X、Y默认值均为50%。（2）X的值可以是left、right、center、长度和百分比。（3）Y的值可以是top、bottom、center、长度和百分比。

	
.twoD_test_father:hover>#twoD_test6{
	transform-origin: 100% 100%;
	transform: translate(200px,50px) scale(1.5,1.5) rotate(20deg) skew(30deg,5deg);
}