HTML5开发系列之 Transform

最新推荐文章于 2022-10-22 11:31:02 发布

原创最新推荐文章于 2022-10-22 11:31:02 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

Html 5 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了HTML5中的Transform特性，包括2D变形的三个主要方面：translate平移，scale缩放和rotate旋转。平移通过控制x和y实现元素位置变化；缩放则可以放大或缩小元素；旋转支持顺时针和逆时针操作，结合透视属性可实现3D效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Transform （2D变形）

1.translate 平移

控制属性为x和y

控制xy属性的时候使用百分比的话，是相对自己的尺寸的；

移动的距离是相对当前盒子的显示位置的；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height:200px;
				background-color: pink;
				transition: all;
				transition-duration: 500ms;
				position: absolute;
				left: 50%;
				top: 50%;
				/*以前的做法是设置负数的margin;但是这种需要计算;*/
				/*margin-left: -100px;
				margin-top: -100px;*/
				/*现在的做法是直接使用transform ,这个百分度是相对自己的;*/
				transform: translate(-50%, -50%);
			}
			div:active{
				transform: translate(100px,200px);  /*通常是和transition搭配使用的;这里的移动距离是相对盒子当前的位置*/
			}
		</style>
	</head>
	<body>
		<div >
			
		</div>
	</body>
</html>

2. 缩放scale

缩放的值小于1表示缩小，如果大于1表示放大

定义一个标签：

		<section>
			<img src="dongman.gif" alt="" />
		</section>

给标签加样式：

			section{
				width: 500px;
				height: 260px;
				margin: 0 auto;
				overflow: hidden;
				border: 5px solid red;
			}
			img{
				transition: all;
				transition-duration: 500ms;
			}
			section:hover img{
				transform: scale(1.5);
			}

3.旋转rotate

正直为顺时针旋转，负值为逆时针旋转；

定义一个span设置下面这样的样式即可：

			span{
				display: block;
				width: 100px;
				height: 100px;
				background-color: yellow;
				transition: all;
				transition-duration: 300ms;
			}
			span:active{
				transform: rotate(-90deg);
			}

其实这种旋转是沿Z轴旋转的额，还可以使用rotatex rotatey 进行旋转就成3D的效果了；

要想有3d效果需要加入一个透视属性，在父盒子中；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:500px;
				height:260px;
				margin: 100px auto;
				perspective: 500px;/*要在父盒子中添加这个属性：3d透视效果*/
			}
			img{
				transition: all;
				transition-duration: 300ms;
				transform-origin: left;/*旋转的轴*/
			}
			img:active{
				transform: rotateY(180deg);
			}
		</style>
	</head>
	<body>
		<div >
			<img src="img/dongman.gif" alt="" />
		</div>
	</body>
</html>