CSS实战与技巧——68. 2D位移转换（transform）【transform: translateX（），transform: translateY（）】

时间sk

已于 2025-03-21 09:31:07 修改

阅读量363

点赞数 5

分类专栏： CSS进阶文章标签： css css3 javascript

于 2025-02-23 04:12:19 首次发布

本文链接：https://blog.csdn.net/weixin_63215361/article/details/145804014

版权

CSS进阶专栏收录该内容

85 篇文章

订阅专栏

转换（transform）：也就是变化或变形。主要有4种变化或变形，一种叫位移，一种叫缩放，还有一种叫角度，最后一种叫倾斜

第一种转换：位移，即让元素往上，往下，往左，往右移动

位移转换:
1.参考点(基点)在元素没有移到前的中心点，如下蓝色中心处为基点
在这里插入图片描述

X轴:正往右,负往左
transform: translateX(50px);—以参考点正方向位移50px

在这里插入图片描述
X轴:正往右,负往左
transform: translateX(-50px);

在这里插入图片描述

X轴:正往右,负往左
transform: translateX(50px);
transform: translateX(-50px);

Y轴:正往下,负往上
transform: translateY(50px);
transform: translateY(-50px);
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			#box{
				width: 300px;height: 300px;background: #ccc;
				margin: 100px auto;
			}
			#zxw{
				width: 300px;height: 300px;background: red;
				/*位移转换:*/
					/*1.参考点(基点)在元素的中心点*/
				/*X轴:正往右,负往左*/
				transform: translateX(50px);
				transform: translateX(-50px);
				/*Y轴:正往下,负往上*/
				transform: translateY(50px);
				transform: translateY(-50px);
			}
			
		</style>
		
	</head>
	<body>
		
		<div id="box">
			<div id="zxw"></div>
		</div>
		
		
	</body>
</html>