CSS - translate Property

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

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

Possible values

1. Single <length-percentage> value:

2. Two <length-percentage> values:

3. Three values:

4. none: No translation should be applied.

Applies to

All the transformable elements.

DOM Syntax

object.style.translate = "none | <length-percentage> <length>";

CSS translate - No translation set

Here is an example where translate is set to none, which results in no translation. Applied along with the pseudo-class :hover.

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 5px;
        border: 1px solid black;
    }
    #m:hover {
        background-color: orange;
        translate: none;
    }
</style>
</head>
<body>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - Using length-percentage for translate on X-axis

Here is an example where translate: <length> | <percentage> value is set for X axis only, which translates the element along X-axis. Applied along with pseudo-class :hover.

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 20px 0;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 50% 0;
    }
    #p:hover {
        background-color: royalblue;
        translate: 2rem 0;
    }
    #m:hover {
        background-color: orange;
        translate: -30% 0;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - Using length-percentage for translate on Y-axis

Here is an example where translate: <length> | <percentage> value is set for Y axis only, which translates the element along Y-axis. Applied along with pseudo-class :hover.

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 0 10px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 0 50%;
    }
    #p:hover {
        background-color: royalblue;
        translate: 0 -30px;
    }
    #m:hover {
        background-color: orange;
        translate: 0 -30%;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - Using length-percentage for translate on Z-axis

Here is an example where translate: <length> | <percentage> value is set for Z axis only, which translates the element along Z-axis. Applied along with pseudo-class :hover.

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 0 0 10px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 0 0 50%;
    }
    #p:hover {
        background-color: royalblue;
        translate: 0 0 -30px;
    }
    #m:hover {
        background-color: orange;
        translate: 0 0 -30%;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - Using length-percentage for translate on X and Y axes

Here is an example where translate: <length> | <percentage> value is set for X and Y axes, which translates the element along the X and Y axes.Applied along with pseudo-class :hover.

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 10px 30px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 50% -40%;
    }
    #p:hover {
        background-color: royalblue;
        translate: -30px -20px;
    }
    #m:hover {
        background-color: orange;
        translate: -30% 15px;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - Using length-percentage for translate on Y and Z axes

Here is an example where translate: <length> | <percentage> value is set for Y and Z axes, which translates the element on Y and Z axes. Applied along with pseudo-class :hover.

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 0 10px 30px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 0 10% 20%;
    }
    #p:hover {
        background-color: royalblue;
        translate: 0 -30px -20px;
    }
    #m:hover {
        background-color: orange;
        translate: 0 -30% 15px;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - Using length-percentage for translate on X and Z axes

Here is an example where translate: <length> | <percentage> value is set for X and Z axes, which translates the element along X and Z axes. Applied along with pseudo-class :hover.

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 10px 0 30px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 10% 0 20%;
    }
    #p:hover {
        background-color: royalblue;
        translate: -30px 0 -20px;
    }
    #m:hover {
        background-color: orange;
        translate: -30% 0 15px;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - Using length-percentage for translate on X, Y and Z axes

Here is an example where translate: <length> | <percentage> value is set for X, Y and Z axes, which translates the element along all the three axes. Applied along with pseudo-class :hover.

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 10px 20px 30px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 10% 30% 20%;
    }
    #p:hover {
        background-color: royalblue;
        translate: -30px 10px -20px;
    }
    #m:hover {
        background-color: orange;
        translate: -30% 10px 30px;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>
Advertisements