CSS – translate
CSS – translate
CSS translate
The CSS translate property allows you to move an element along the X (horizontal), Y (vertical), and Z (depth) axes.
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 Z-axis settings.
Possible Values
- A single
<length-percentage>value:<length>or<percentage>value specifies the translation along the X axis.
-
with translate() Same as the translate() function, except that two values are specified.
-
Two
<length-percentage>values:- Two
<length>or<percentage>values specify translation along the X and Y axes. -
Same as the translate() function, except that two values are specified.
- Two
-
Three values:
- Two
<length-percentage>and a single<length>value specify translation along the X, Y, and Z axes. -
Same as the translate3d() function, except that three values are specified.
- Two
-
none : No translation is applied.
Applies to
All transformable elements.
DOM Syntax
object.style.translate = "none | <length-percentage> <length>";
CSS translate – none
This is an example where translate is set to none .
<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 – X-axis
Here is an example where we set **translate: <length> | <percentage>** on the X-axis only:
<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>
<p>Bring cursor over the boxes to see the result.</p>
<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 – Y-axis
Here’s an example: We set the translate property for the Y-axis: translate: <length> | <percentage>
<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>
<p>Bring cursor over the boxes to see the result.</p>
<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 – Z axis
This is an example where we only set translate: <length> | <percentage>
for the Z axis.
<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>
<p>Bring cursor over the boxes to see the result.</p>
<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 – X & Y axis
Here is an example where we set translate: <length> | <percentage> on the X and Y axes:
<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>
<p>Bring cursor over the boxes to see the result. </p>
<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 – Y & Z axis
Here is an example where we set translate: <length> | <percentage>:
<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>
<p>Bring cursor over the boxes to see the result.</p>
<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 – X & Z axis
Here is an example where we set translate: <length> | <percentage>
on the X and Z axes.
<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>
<p>Bring cursor over the boxes to see the result.</p>
<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 – X, Y & Z axes
Here is an example with X, Y, and Z axis settings: translate: <length> | <percentage>
<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>
<p>Bring cursor over the boxes to see the result.</p>
<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>