📌  相关文章
📜  CSS | translateX()函数(1)

📅  最后修改于: 2023-12-03 15:00:06.650000             🧑  作者: Mango

CSS | translateX()函数

介绍

在 CSS 中，translateX() 函数用于水平移动元素。它是 CSS3 transform 属性中的一种，可以通过改变元素的位置来实现动态效果。

translateX() 函数需要一个参数，表示元素沿着 X 轴要移动的距离（单位是像素、百分比或 rem），它可以是正数、负数或零。当参数为正数时，元素向右移动；当参数为负数时，元素向左移动。

语法
transform: translateX(n);
  • n：表示元素沿着 X 轴要移动的距离，可以是像素、百分比或 rem。正数表示元素向右移动，负数表示元素向左移动。
示例

在以下示例中，我们将使用 translateX() 函数来水平移动一个元素。

示例 1：

下面的示例中，我们使用 translateX() 函数将图片向右移动 50 像素。

<!DOCTYPE html>
<html>
<head>
  <title>translateX() 函数示例</title>
  <style>
      img {
          transition: transform 0.3s ease-in-out;
      }

      img:hover {
          transform: translateX(50px);
      }
  </style>
</head>
<body>
  <img src="image.png">
</body>
</html>
示例 2：

在下面的示例中，我们使用 translateX() 函数将 DIV 元素向左移动 50% 的距离。

<!DOCTYPE html>
<html>
<head>
  <title>translateX() 函数示例</title>
  <style>
      div {
          width: 200px;
          height: 200px;
          background-color: red;
          transition: transform 0.3s ease-in-out;
      }

      div:hover {
          transform: translateX(-50%);
      }
  </style>
</head>
<body>
  <div></div>
</body>
</html>
浏览器兼容性

translateX() 函数在大部分现代浏览器中都得到了支持，包括 Chrome、Firefox、Safari、Opera 和 Edge。对于一些较旧的浏览器，比如 Internet Explorer 9 及更早版本，可能不支持该函数。