CSS Function - translateX()

The translateX() function in CSS is used to translate, or move, an element horizontally along the X-axis. It's one of the transformation functions in CSS that allows you to modify the position and appearance of elements on a web page. The result is a <transform-function> datatype.

The translateX() function is often used in conjunction with other CSS transformation functions like translateY() (for vertical movement), scale() (for scaling), and rotate() (for rotation) to create more complex transformations and animations on web elements.

Possible values

The function translateX() can take only one parameter. It specifies the distance by which the element should be moved horizontally. Positive values move the element to the right, while negative values move it to the left.

Syntax

transform: translateX(100px) | translateX(45%);

CSS translateX() - Length Value

Following is an example of translateX() function with a length value as parameter:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      border: 2px solid black;
      background-color: aquamarine;
      margin-bottom: 5px;
   }

   .translate-x-length {
      transform: translateX(100px);
      background-color: tomato;
   }
</style>
</head>
<body>
   <div>No translateX() applied</div>
   <div class="translate-x-length">translateX(100px) applied</div>
</body>
</html>

CSS translateX() - Percentage Value

Following is an example of translateX() function with a percentage value as parameter:

<html>
<head>
<style>
   div {
      height: 110px;
      width: 110px;
      border: 2px solid black;
      background-color: aquamarine;
      margin-bottom: 5px;
   }

   .translate-x-percent {
      transform: translateX(30%);
      background-color: tomato;
   }
</style>
</head>
<body>
   <div>No translateX() applied</div>
   <div class="translate-x-percent">translateX(30%) applied</div>
</body>
</html>

CSS translateX() - Using Negative Percentage Value

Following is an example of translateX() function with a negative percentage value as parameter:

<html>
<head>
<style>
   div {
      height: 110px;
      width: 110px;
      border: 2px solid black;
      background-color: aquamarine;
      margin-bottom: 5px;
   }

   .translate-x-percent {
      transform: translateX(-10%);
      background-color: tomato;
   }
</style>
</head>
<body>
   <div>No translateX() applied</div>
   <div class="translate-x-percent">translateX(-10%) applied</div>
</body>
</html>

CSS translateX() - Using Negative Length Value

Following is an example of translateX() function with a negative length value as parameter:

<html>
<head>
<style>
   div {
      height: 115px;
      width: 115px;
      border: 2px solid black;
      background-color: aquamarine;
      margin-bottom: 5px;
   }

   .translate-x-length {
      transform: translateX(-10px);
      background-color: tomato;
   }
</style>
</head>
<body>
   <div>No translateX() applied</div>
   <div class="translate-x-length">translateX(-10px) applied</div>
</body>
</html>
Advertisements