CSS Transforms

The translate() function in CSS is part of the transform family and allows moving an element along the X (horizontal) and/or Y (vertical) axis without affecting other elements. It is one of the most useful functions for precise element positioning.

1. How to Use translate in CSS?

You write the translate() function inside the transform property; newer browsers also have a separate translate property, e.g. translate: 50px 100px;. For example:

div {
  transform: translate(50px, 100px);
}

In this case, the <div> will be moved 50 pixels to the right (along the X axis) and 100 pixels down (along the Y axis - in CSS, positive values on this axis move the element down).

2. Moving Along One Axis

You can also move an element along only one axis, using translateX or translateY. For example:

/* Moving only along the X axis */
div {
  transform: translateX(50px);
}

/* Moving only along the Y axis */
div {
  transform: translateY(100px);
}

3. Percentages as Units

The translate function can also accept percentages as units, which allows moving an element relative to its own width or height. For example:

div {
  transform: translate(10%, 20%);
}

Here the element will be moved by 10% of its width and 20% of its height.

4. Combining with Other Transforms

translate can be combined with other transforms, such as rotate, scale, and skew, to achieve complex effects. For example:

div {
  transform: translate(50px, 100px) rotate(30deg) scale(1.2);
}

The order of the functions matters: swapping translate and rotate gives a different result.

5. Other Transforms

Translate is just one of many transforms that can be applied to HTML elements. Other transforms include:

scale(sx, sy): Scales an element, where sx is the scale along the X axis and sy along the Y axis. scaleX(sx): Scales an element only along the X axis. scaleY(sy): Scales an element only along the Y axis. rotate(angle): Rotates an element by a specified angle, given in degrees (deg), radians (rad), grads (grad), or turns (turn). skew(x-angle, y-angle): Skews an element by specified angles along the X and Y axes. skewX(angle): Skews an element only along the X axis. skewY(angle): Skews an element only along the Y axis. matrix(a, b, c, d, e, f): Allows applying a transformation using a 2D transformation matrix. matrix3d(...): Similarly to matrix, but for 3D transformations. rotateX(angle): Rotates an element around the X axis in 3D space. rotateY(angle): Rotates an element around the Y axis in 3D space. rotateZ(angle): Rotates an element around the Z axis in 3D space. scale3d(sx, sy, sz): Scales an element in 3D space. translate3d(x, y, z): Moves an element in 3D space. perspective(n): Applies perspective to a 3D element.

Exercise: CSS Transforms

In this exercise, you'll learn how to use different CSS transforms to move, rotate, scale, and skew elements on a page. Your task will be to create a web page with different elements that will be styled using CSS transforms.

Step 1: Create the basic HTML document structure

First, create a new HTML file and add the basic HTML document structure. Add <div> elements with classes for different transforms in the body of the document (<body>).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
  <title>CSS Transforms</title>
</head>
<body>
  <h1>CSS Transforms</h1>
  <div class="box translate">Translate</div>
  <div class="box translate-x">TranslateX</div>
  <div class="box translate-y">TranslateY</div>
  <div class="box rotate">Rotate</div>
  <div class="box scale">Scale</div>
  <div class="box skew">Skew</div>
</body>
</html>

Step 2: Create the CSS file

Open or create a new CSS file and save it as styles.css.

Step 3: Basic styling

Add basic styles for the <div> elements so they are visible on the page.

body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin: 20px;
}

Step 4: The translate transform

Add a style for the .translate class to move the element along both axes.

/* Translate transform */
.translate {
  transform: translate(50px, 100px);
}

Step 5: The translateX transform

Add a style for the .translate-x class to move the element only along the X axis.

/* TranslateX transform */
.translate-x {
  transform: translateX(50px);
}

Step 6: The translateY transform

Add a style for the .translate-y class to move the element only along the Y axis.

/* TranslateY transform */
.translate-y {
  transform: translateY(50px);
}

Step 7: The rotate transform

Add a style for the .rotate class to rotate the element.

/* Rotate transform */
.rotate {
  transform: rotate(45deg);
}

Step 8: The scale transform

Add a style for the .scale class to scale the element.

/* Scale transform */
.scale {
  transform: scale(1.5);
}

Step 9: The skew transform

Add a style for the .skew class to skew the element.

/* Skew transform */
.skew {
  transform: skew(20deg, 10deg);
}

Result

After completing all the steps, your HTML and CSS files should look as follows:

HTML file (index.html)

The whole page from step 1, unchanged:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
  <title>CSS Transforms</title>
</head>
<body>
  <h1>CSS Transforms</h1>
  <div class="box translate">Translate</div>
  <div class="box translate-x">TranslateX</div>
  <div class="box translate-y">TranslateY</div>
  <div class="box rotate">Rotate</div>
  <div class="box scale">Scale</div>
  <div class="box skew">Skew</div>
</body>
</html>

CSS file (styles.css)

All the rules from steps 3-9 in one file:

body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin: 20px;
}

/* Translate transform */
.translate {
  transform: translate(50px, 100px);
}

/* TranslateX transform */
.translate-x {
  transform: translateX(50px);
}

/* TranslateY transform */
.translate-y {
  transform: translateY(50px);
}

/* Rotate transform */
.rotate {
  transform: rotate(45deg);
}

/* Scale transform */
.scale {
  transform: scale(1.5);
}

/* Skew transform */
.skew {
  transform: skew(20deg, 10deg);
}

Experiment Further

1. Add more elements with different transforms to better understand how different transforms work.
2. Try adding more styles to your page, e.g., changing colors, sizes, and other CSS properties.
3. Test your skills by creating more complex effects using different combinations of transforms.

After completing this exercise, you should better understand how to use different CSS transforms to move, rotate, scale, and skew elements on a page.