Css3 ---- transform平移

最新推荐文章于 2025-10-09 17:55:28 发布

原创最新推荐文章于 2025-10-09 17:55:28 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文详细介绍了CSS中的transform属性，包括translateX、translateY和translate的使用方法。通过实例讲解了如何在水平和垂直方向上移动元素，以及如何利用负值实现相反方向的平移。

transform的用法：
transform：translate（x轴平移，y轴平移）; 也可以单独设置：transform：translateX（）; transform：translateY（）。如果只设置transform：translate（值），那么只会在X轴进行平移。值可以取负数。
也可以设置为 translateZ(); 但是需要配合旋转，效果才比较明显。
代码：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	    <style>
	       .warpper{
	           width: 600px;
	           height: 500px;
	           background-color: #fff;
	           position: relative;
	           left: 30px;
	           top: 30px;
	       }
	       .box{
	           width: 200px;
	           height: 200px;
	           background-color: red;
	           transform: translate(100px);
	       }
	    </style>
	</head>
	<body bgcolor="black">
	     <div class="warpper">
	           <div class="box"> </div>
	     </div>
	</body>
	</html>

当设置为 translateX(值) 时，元素会水平方向上进行移动。translateX(100px);
当值为负数时，元素就会在水平方向上向左平移。
在这里插入图片描述
当设置为 translateY(值) 时，元素会垂直方向上进行移动。 translateY(100px);
当值为负数时，元素就会在垂直方向上向上平移。

当设置为 translate(值) 时，如果里面只有一个值，则只会向水平方向上移动。 translate(100px);
在这里插入图片描述
如果设置为 translate(值1，值2) 时，则只会向水平方向上移动和向垂直方向上移动。 translate(100px，100px);
也可以写成 transform:translateX(100px) translateY(100px); 效果一样。