css中transform属性的详细介绍

最新推荐文章于 2025-07-22 12:55:01 发布

原创最新推荐文章于 2025-07-22 12:55:01 发布 · 2.7k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#css #servlet #前端

html 专栏收录该内容

8 篇文章

订阅专栏

第一步：框架

第二步,我们来认识transform的第一个属性scale（）（放大或缩小）

第三步：认识rotato（旋转）

第四步：介绍skew

第五步：介绍translate

第一步：框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

第二步,我们来认识transform的第一个属性scale（）（放大或缩小）

我们先写一个div加上一些样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: brown;
		}
	</style>
	<body>
		<div>
			我用来演示
		</div>
	</body>
</html>

接下来加入scale

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: brown;
			transition: all 0.5s;

		}

		div:hover {
			transform: scale(1.5);
		}
	</style>
	<body>
		<div>
			我用来演示
		</div>
	</body>
</html>

这里我们给scale的值设置为1.5，效果就是当div hover时放大1.5倍，至于transition效果则是一个过渡的效果，后续会专门介绍

1

第三步：认识rotato（旋转）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: brown;
			transition: all 0.5s;

		}

		div:hover {
			transform: rotate(75deg);
		}
	</style>
	<body>
		<div>
			我用来演示
		</div>
	</body>
</html>

这里的话我们给rotato的值加了75deg，这个效果就是当div hover时，div顺时针旋转75度，也可以设置负值，或者很大的值，但设置上360一类整圈时，最好给背景色加一个渐变，那样效果才能显示出来

2

第四步：介绍skew

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: brown;
			transition: all 0.5s;

		}

		div:hover {
			transform: skew(35deg);
		}
	</style>
	<body>
		<div>
			我用来演示
		</div>
	</body>
</html>

这里我给skew加的值是35deg，这里之前没有说道的是，如果设置一个值，那么就是水平和垂直方向同时设置，如果想给水平和垂直里分别设置，以此为例（35deg,35deg），中间用逗号链接即可

3

第五步：介绍translate

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: brown;
			transition: all 0.5s;

		}

		div:hover {
			transform: translate(150px);
		}
	</style>
	<body>
		<div>
			我用来演示
		</div>
	</body>
</html>