位移、缩放、旋转、阴影、斜切

最新推荐文章于 2021-10-23 20:56:47 发布

黄晶谛

最新推荐文章于 2021-10-23 20:56:47 发布

阅读量105

点赞数

分类专栏： # HTML&CSS

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/116905164

版权

HTML&CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、位移

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			/* transform: translate(200px, 0); */

			/* 使定位的盒子水平居中 */
			position: absolute; /* 定位 */
			left: 50%;/* 向左走浏览器宽度的一半 */
			top: 50%;/* 向右走浏览器宽度的一半 */
			transform: translate(-50%, -50%); /* 在x和y方向上分别走自己的一半 */

		}

	</style>
</head>
<body>
	<div></div>
</body>
</html>

二、缩放

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
		}

		div:hover {
			/* transform: scale(0.5, 0.5); *//* 宽度和高度都变为原来的一半 */
			transform: scale(0.8); /* 高度省略，默认和宽度一起缩放 */
		}

	</style>
</head>
<body>
	<div></div>
</body>
</html>

三、旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		div {
			width: 300px;
			height: 300px;
			background-color: pink;
			margin: 100px auto;
			transition: all 0.6s;
			transform-origin: right bottom;/*设置旋转中心点*/
		}

		div:hover {
			transform: rotate(360deg);
		}

	</style>
</head>
<body>
	<div>giserDev</div>
</body>
</html>

四、斜切

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			transform: skew(30deg);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

五、阴影

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 300px;
			height: 400px;
			background-color: pink;
			transition: all 0.6s;
		}

		div:hover {
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
		}

	</style>
</head>
<body>
	<div></div>
</body>
</html>