We use cookies to enhance your experience on the site

CSS Transforms

The translate property 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 properties for precise element positioning.

1. How to Use translate in CSS?

To use translate, you need to apply the transform property to the element you want to move.

Example:

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

In this case, the <div> will be moved 50 pixels to the right (along the X axis) and 100 pixels up (along the Y axis).

2. Moving Along One Axis

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

Examples:

1/* Moving only along the X axis */
2div {
3  transform: translateX(50px);
4}
5
6/* Moving only along the Y axis */
7div {
8  transform: translateY(100px);
9}

3. Percentages as Units

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

Example:

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

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

4. Working with Other Transforms

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

Example:

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

5. Other Transforms

Translate is just one of many transforms that can be applied to HTML elements. Other, less commonly used 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>

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
7  <title>CSS Transforms</title>
8</head>
9<body>
10  <h1>CSS Transforms</h1>
11  <div class="box translate">Translate</div>
12  <div class="box translate-x">TranslateX</div>
13  <div class="box translate-y">TranslateY</div>
14  <div class="box rotate">Rotate</div>
15  <div class="box scale">Scale</div>
16  <div class="box skew">Skew</div>
17</body>
18</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.

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.box {
8  width: 100px;
9  height: 100px;
10  background-color: lightblue;
11  display: flex;
12  align-items: center;
13  justify-content: center;
14  text-align: center;
15  font-size: 14px;
16  font-weight: bold;
17  margin: 20px;
18}

Step 4: The translate transform

Add a style for the

.translate

class to move the element along both axes.

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

Step 5: The translateX transform

Add a style for the

.translate-x

class to move the element only along the X axis.

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

Step 6: The translateY transform

Add a style for the

.translate-y

class to move the element only along the Y axis.

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

Step 7: The rotate transform

Add a style for the

.rotate

class to rotate the element.

1/* Rotate transform */
2.rotate {
3  transform: rotate(45deg);
4}

Step 8: The scale transform

Add a style for the

.scale

class to scale the element.

1/* Scale transform */
2.scale {
3  transform: scale(1.5);
4}

Step 9: The skew transform

Add a style for the

.skew

class to skew the element.

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

Result

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

HTML file (index.html)

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link the CSS file -->
7  <title>CSS Transforms</title>
8</head>
9<body>
10  <h1>CSS Transforms</h1>
11  <div class="box translate">Translate</div>
12  <div class="box translate-x">TranslateX</div>
13  <div class="box translate-y">TranslateY</div>
14  <div class="box rotate">Rotate</div>
15  <div class="box scale">Scale</div>
16  <div class="box skew">Skew</div>
17</body>
18</html>

CSS file (styles.css)

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.box {
8  width: 100px;
9  height: 100px;
10  background-color: lightblue;
11  display: flex;
12  align-items: center;
13  justify-content: center;
14  text-align: center;
15  font-size: 14px;
16  font-weight: bold;
17  margin: 20px;
18}
19
20/* Translate transform */
21.translate {
22  transform: translate(50px, 100px);
23}
24
25/* TranslateX transform */
26.translate-x {
27  transform: translateX(50px);
28}
29
30/* TranslateY transform */
31.translate-y {
32  transform: translateY(50px);
33}
34
35/* Rotate transform */
36.rotate {
37  transform: rotate(45deg);
38}
39
40/* Scale transform */
41.scale {
42  transform: scale(1.5);
43}
44
45/* Skew transform */
46.skew {
47  transform: skew(20deg, 10deg);
48}

Experiment Further

Add more elements with different transforms to better understand how different transforms work.
Try adding more styles to your page, e.g., changing colors, sizes, and other CSS properties.
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.

Go to CodeWorlds→