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:
<length> or <percentage> value, specifying a translation along X axis.
Same as translate() function, with one value specified.
2. Two <length-percentage> values:
Two <length> or <percentage> values, specifying the translation along X and Y axes.
Same as translate() function, with two values specified.
3. Three values:
Two <length-percentage> and single <length> values, specifying the translation along X, Y and Z axes.
Same as translate3d() function, with three values specified.
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>
To Continue Learning Please Login
Login with Google