CSS3-transform-位移、旋转、倾斜、缩放

作者: Darren 分类: html与css 发布时间: 2019-05-22 20:51

移动 translate(x, y)

/*使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。*/
translate(50px,50px);
/*如果只设置了一个值,代表水平方向移动*/
translate(50px)

/*可以设置百分比,移动的距离是相对元素自身的宽度高度百分之多少*/
translate(100%,100%)
 translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
 translate(x)水平方向移动(X轴移动)
 translateX(x)仅水平方向移动(X轴移动)
 translateY(Y)仅垂直方向移动(Y轴移动)

案例源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.father{
			width: 600px;
			height: 500px;
			border:1px solid blue;
			margin: 50px auto;
		}
		.father .son{
			width: 100px;
			height: 100px;
			background: red;
			/*过渡属性*/
			transition: all 2s;
		}
		.father:hover .son{
			/*移动*/
			/*transform: translate(水平位置移动,垂直位置移动);*/
			/*translate取值可以是数值也可以百分比,数值要写px,允许负值;百分比也可以负值;百分比是相对自身元素;*/
			/*transform: translate(x,y);*/
			/*transform: translate(300px,0);*/
			/*transform: translate(0,300px);*/
			transform: translate(200px,300px);
			/*transform: translate(-50px,-30px);*/
			/*transform: translate(-50%,0);*/

			/*如果transform: translate(一个值)只水平移动*/
			/*transform: translate(100px);*/

			/*transform: translateX(水平移动位置);*/
			/*transform: translateX(100px);*/

			/*transform: translateY(垂直移动位置);*/
			/*transform: translateY(100px);*/
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

缩放 scale(x, y)

transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%,垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scale(一个值)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(x)元素仅水平方向缩放(X轴缩放)
scaleY(y)元素仅垂直方向缩放(Y轴缩放)

scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大;

其实可以简单理解成就是把元素的宽度高度变成原来的多少倍,比如scale(0.5,2);就是宽度变成原来的0.5倍,高度变成原来的2倍

案例源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.father{
			width: 600px;
			height: 500px;
			border:1px solid blue;
			margin: 50px auto;
		}
		.father .son{
			width: 100px;
			height: 100px;
			background: red;
			transition:  all 2s;
		}
		.father:hover .son{
			/*scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)*/
			
			/*取值:数值,多少倍,1代表原来宽度与高度;*/

			/*transform: scale(宽度,高度)*/

			/*宽度变成原来的2倍,高度不变*/
			/*transform: scale(2,1);*/

			/*高度变成原来的2倍,宽度不变*/
			/*transform: scale(1,2);*/
			
			/*宽度缩小50%,高度不变*/
			transform: scale(0.5,1);

			
			/*scale(一个值)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)*/
			/*transform: scale(2);*/
			
			/*scaleX(x)元素仅水平方向缩放(X轴缩放)*/
			/*transform: scaleX(2);*/

			/*scaleY(y)元素仅垂直方向缩放(Y轴缩放)*/
			/*transform: scaleY(2);*/
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">sonsonsosno</div>
	</div>
</body>
</html>

旋转 rotate(deg度数)

可以对元素进行旋转,正值为顺时针,负值为逆时针默认以元素的中心点作为原点旋转

案例源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.father{
			width: 600px;
			height: 500px;
			border:1px solid blue;
			margin: 50px auto;
		}
		.father .son{
			width: 200px;
			height: 50px;
			background: red;
			transition: 3s all;
		}
		.father:hover .son{
			/*默认旋转圆点是元素的中心点(垂直水平轴的交界点)*/
			/*正值,顺时针旋转*/
			/*transform: rotate(360deg);*/
			/*负值,逆时针旋转*/
			transform: rotate(-360deg);
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">aaaaaaaaa</div>
	</div>
</body>
</html>

transform-origin可以调整元素转换变形的原点

div{
    /* 改变元素原点到左上角,然后进行顺时旋转45度 */  
     transform-origin: left top;
     transform: rotate(45deg); 
}   

如果是4个角,可以用 left top这些,如果想要精确的位置, 可以用 px 像素 也可以使用百分比。

 div{
     /* 改变元素原点到x 为10  y 为10,然后进行顺时旋转45度 */ 
     transform-origin: 10px 10px;
     transform: rotate(45deg); 
} 

案例源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.father{
			width: 600px;
			height: 500px;
			border:1px solid blue;
			margin: 50px auto;
		}
		.father .son{
			width: 200px;
			height: 50px;
			background: red;
			transition: 3s all;
			/*旋转圆点改变为左上角变形*/
			/*元素的左上角*/
			transform-origin: left top;
			/*transform-origin: right top;*/
			/*transform-origin: center center;*/
			/*transform-origin: 100px top;*/
		}
		.father:hover .son{
			/*默认旋转圆点是元素的中心点(垂直水平轴的交界点)*/
			transform: rotate(90deg);
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">aaaaaaaaa</div>
	</div>
</body>
</html>

倾斜skew(deg, deg)

使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.father{
			width: 600px;
			height: 500px;
			border:1px solid blue;
			margin: 50px auto;
		}
		.father .son{
			width: 100px;
			height: 100px;
			background: red;
			transition: all 2s;
		}
		.father:hover .son{
			/*transform: skew(x,y)*/
			/*取值:数值,单位deg度数*/
			transform: skew(50deg,0deg);
			/*transform: skew(0deg,50deg);*/
			/*transform: skew(50deg,50deg);*/
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注