html5css3:过渡transition 2d转换transform translate移动 scale缩放 rotate旋转

关注

原创最新推荐文章于 2026-11-11 13:57:39 发布 710 阅读 AI 写同款· GEO 优化 ›

CSS3 transform核心函数详解：translate、rotate、scale原理与实战在网页开发中，CSS transform属性是实现高性能视觉变换和动画的核心技术。其原理是通过矩阵运算在元素的局部坐标系上进行平移、旋转和缩放操作，这一过程由GPU加速，避免了重排和重绘，从而带来流畅的性能体验。transform的技术价值在于能够以声明式的方式创建丰富的交互效果，是构建现代Web界面动态反馈、过渡动画和3D场景的基础。在实际应用场景中，translate常用于元素定位与微交互，rotate用于加载指示和状态切换，scale则负责视觉尺寸的弹性控制。本文将深入解析translate、rota 阅读详情

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>体验一下过渡效果</title>
		<style type="text/css">
			div{
				width:100px; height:100px; background:navajowhite;margin:100px auto;
				border-radius: 15px;box-shadow: 3px 3px 3px 3px #FFC0CB;
				transition:all 1s ease-in 0s;
			}
			div:hover{
				width:200px;height:200px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

过渡小例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标经过放大图片并且旋转</title>
		<style type="text/css">
			div{width:220px;height:200px;overflow:hidden;margin:100px auto;
			border-radius:15px;box-shadow: 2px 2px 2px 2px #333333;}
			img{
				transition:all 0.3s ease-in 0s;
			}
			img:hover{
				transform:scale(1.3) rotate(10deg);
			}
		</style>
	</head>
	<body>
		<div><img src="img/ldh.jpg"/></div>
	</body>
</html>

收录于