CSS3中使用translate() 方法实现元素位置的移动

最新推荐文章于 2025-10-07 21:43:58 发布

转载最新推荐文章于 2025-10-07 21:43:58 发布 · 4k 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=j1jbcjccb&title=CSS3%E4%B8%AD%E4%BD%BF%E7%94%A8translate%28%29+%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E5%85%83%E7%B4%A0%E4%BD%8D%E7%BD%AE%E7%9A%84%E7%A7%BB%E5%8A%A8

文章标签：

#CSS

前端专栏收录该内容

2065 篇文章

订阅专栏

本文详细介绍了CSS中transform:translate()方法的使用，通过实例展示了如何利用该方法使元素在其当前位置的基础上，根据指定的x坐标和y坐标进行移动。通过具体代码示例，读者可以了解如何在不同浏览器中实现元素的精确位置调整。

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

实例

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

实例：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>