CSS - translate Property

Quiz

The translate Property

The translate property of CSS allows you to move an element along the X-axis (horizontal), Y-axis (vertical), and Z-axis (depth).

The translate property is similar to the translate() function of the transform property. The only difference between the two is that the latter does not support the Z-axis setting.

Syntax

The syntax for the CSS translate property is as follows:

translate: x-axis y-axis z-axis | none;

Possible values

Value	Description
none	It specifies no translation should be applied.
x-axis	It specifies translation along the X-axis. If one value is specified with the translate property, then it specifies translation in the x-axis.
y-axis	It specifies translation along the Y-axis. If two values are specified with the translate property, then the first value specifies translation in the x-axis and the second value in the y-axis. To specify translation only the in y-axis, specify the first value as 0px.
z-axis	It specifies translation along the Z-axis. If three values are specified with the translate property, then the first, second, and third value specifies translation in the x-axis, y-axis, and z-axis respectively. To specify translation only in the z-axis, specify the first two values as 0px.

You can use either <length> or <percentage> to specify the value of the translate property.

Applies to

All the transformable elements.

CSS translate Property with none Value

To specify that there should not be any translation effect on any axis, we use the translate property with none value.

Example

The following example sets the translate property to none which disables the translation effect on the div box.

<html>
<head>
    <style>
        .box {
            height: 100px;
            width: 100px;
            display: inline-block;
            padding: 10px;
            border: 1px solid black;
            transition: all 0.3s ease;
        }

        .box:hover {
            background-color: #04af2f;
            translate: none;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
</html>

CSS translate on X-Axis

You can use a single value with the translate property to move an element on the horizontal axis. You can either use length or percentage value for this.

Example

In this example, we have used a positive length value on the first box and a negative percentage value on the second box with the translate property. The first box will move to the right and the second box will move to the left on the x-axis.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            height: 100px;
            width: 200px;
            padding: 10px;
            border: 1px solid black;
            margin: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f0f0ff;            
        }
        .box {
            height: 80px;
            width: 80px;
            border: 1px solid black;
            display: inline-block;
            transition: all 0.3s ease;
            background-color: white;
        }
        .box1:hover {
            background-color: #04af2f;
            translate: 10px;
        }
        .box2:hover {
            background-color: #031926;
            translate: -10%;
        }
    </style>
</head>
<body>
    <h2>CSS translate Property</h2>
    <p>Translation on x-axis.</p>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>    
</body>
</html>

CSS translate on Y-Axis

To translate an element on the y-axis, you need to use a double value with the translate property while setting the first value to 0.

Example

In this example, we have used a positive length value on the first box and a negative percentage value on the second box with the translate property. The first box will move downwards and the second box will move upwards on the y-axis.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            height: 150px;
            width: 200px;
            padding: 10px;
            border: 1px solid black;
            margin: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f0f0ff;            
        }
        .box {
            height: 80px;
            width: 80px;
            border: 1px solid black;
            display: inline-block;
            transition: all 0.3s ease;
            background-color: white;
        }
        .box1:hover {
            background-color: #04af2f;
            translate: 0px 15px;
        }
        .box2:hover {
            background-color: #031926;
            translate: 0% -15%;
        }
    </style>
</head>
<body>
    <h2>CSS translate Property</h2>
    <p>Translation on y-axis.</p>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>    
</body>
</html>

CSS translate on Z-Axis

To translate an element on the z-axis, you need to use a triple value with the translate property while setting the first two values to 0.

Example

In this example, we have used a positive and negative length value on the first box and second box respectively with the translate property. The first box will appear to move closer to the screen while the second box will move away from the screen.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            perspective: 100px;
            height: 150px;
            width: 200px;
            padding: 10px;
            border: 1px solid black;
            margin: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f0f0ff;            
        }
        .box {
            height: 80px;
            width: 80px;
            border: 1px solid black;
            display: inline-block;
            transition: all 0.3s ease;
            background-color: white;
        }
        .box1:hover {
            background-color: #04af2f;
            translate: 0 0 15px;
        }
        .box2:hover {
            background-color: #031926;
            translate: 0 0 -10px;
        }
    </style>
</head>
<body>
    <h2>CSS translate Property</h2>
    <p>Translation on z-axis.</p>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>    
</body>
</html>

CSS translate on X and Y Axes

You can translate an element on both the x and y axes by using a double value with the translate property.

Example

In this example, we have used two values with the translate property. The first and second value moves the box in horizontal and vertical directions respectively.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            height: 150px;
            width: 250px;
            padding: 10px;
            border: 1px solid black;
            margin: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f0f0ff;            
        }
        .box {
            height: 80px;
            width: 80px;
            border: 1px solid black;
            display: inline-block;
            transition: all 0.3s ease;
            background-color: white;
        }
        .box1:hover {
            background-color: #04af2f;
            translate: 15px 10px;
        }
        .box2:hover {
            background-color: #031926;
            translate: -15% -15%;
        }
    </style>
</head>
<body>
    <h2>CSS translate Property</h2>
    <p>Translation on both x and y-axis.</p>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>    
</body>
</html>

CSS translate on Y and Z Axes

You can translate an element on both the y and z-axes by using a double value with the translate property while setting the x-axes value as 0.

Example

In this example, we have used two values with the translate property. The second and third value moves the box to the y-axis and z-axis respectively.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            perspective: 100px;
            height: 150px;
            width: 250px;
            padding: 10px;
            border: 1px solid black;
            margin: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f0f0ff;            
        }
        .box {
            height: 80px;
            width: 80px;
            border: 1px solid black;
            display: inline-block;
            transition: all 0.3s ease;
            background-color: white;
        }
        .box1:hover {
            background-color: #04af2f;
            translate: 0px 15px 10px;
        }
        .box2:hover {
            background-color: #031926;
            translate:0 -15% 10px;
        }
    </style>
</head>
<body>
    <h2>CSS translate Property</h2>
    <p>Translation on both y and z-axis.</p>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>    
</body>
</html>

CSS translate on X and Z Axes

To translate an element on both the x and z-axes, you can use a double value with the translate property while setting the y-axis value to 0.

Example

In this example, we have used two values with the translate property. The first and third value moves the box to the x-axis and z-axis respectively.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            perspective: 100px;
            height: 150px;
            width: 250px;
            padding: 10px;
            border: 1px solid black;
            margin: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f0f0ff;            
        }
        .box {
            height: 80px;
            width: 80px;
            border: 1px solid black;
            display: inline-block;
            transition: all 0.3s ease;
            background-color: white;
        }
        .box1:hover {
            background-color: #04af2f;
            translate: 15px 0 15px;
        }
        .box2:hover {
            background-color: #031926;
            translate: -15% 0 10px;
        }
    </style>
</head>
<body>
    <h2>CSS translate Property</h2>
    <p>Translation on both x and z-axis.</p>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>    
</body>
</html>

CSS translate on X, Y and Z Axes

To translate an element in all directions, you can use three values with the translate property.

Example

In this example, we have used three values with the translate property. The first, second, and third value moves the box horizontally, vertically, and in the z-axis respectively.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            perspective: 100px;
            height: 150px;
            width: 250px;
            padding: 10px;
            border: 1px solid black;
            margin: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f0f0ff;            
        }
        .box {
            height: 80px;
            width: 80px;
            border: 1px solid black;
            display: inline-block;
            transition: all 0.3s ease;
            background-color: white;
        }
        .box1:hover {
            background-color: #04af2f;
            translate: 15px 15% 15px;
        }
        .box2:hover {
            background-color: #031926;
            translate: -15% -10px 10px;
        }
    </style>
</head>
<body>
    <h2>CSS translate Property</h2>
    <p>Translation on x,y, and z-axis.</p>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>    
</body>
</html>

Supported Browsers

Property
translate	104.0	104.0	72.0	14.1	90.0

Print Page