Introduction
In this article we will learn about the translate method of CSS3. It's part of CSS3 2D and 3D transformations. This method comes with five variants out of which three methods are for 2D transform and the other two are for 3D transforms. We will learn about the following five variants of the translate method:
- Translation on X-axes: translateX(K)
- Translation on Y-axes: translateY(K)
- Translation on X/Y-axes: translate(K1,K2)
- Translation on Z-axes: translateZ(K)
- Translation on X/Y/Z-axes: translate3d(K1,K2,K3)
Note that the sample code in this article will only work in the Chrome browser but see the bottom of this article for prefixes for Internet Explorer and Firefox. So let's start our discussion with the first variant of the translate method.
Translation on X-axes: translateX(K)
Translation stands for shifting an element by some distance. Let that distance be K. When the element is transferred along the X-axes it is known as a translation along the X-axes. It is similar to absolute position with the left offset equal to K. K is any number given in pixels and it can vary from negative integers to positive integers.
Example 1
<div id="box-X"></div>
CSS
#box-X{
width:100px;
height:100px;
border:1px solid black;
position:absolute;
top:40px;
left:40px;
-webkit-transition:all 0.5s;
}
#box-X:hover{
-webkit-transform:translateX(200px);
}
On running the preceding example we will see the translation of the box along the X-axes from the origin (0,0) to (200,0), in other words translation by an amount of 200px along the X-axes. The same can also be done by setting the left property to 200px. The output of the code above is as follows:
![]()
Translation on Y-axes: translateY(K)
This variant of method is used for translating the element along the Y-axes. The element's X-coordinate remains the same but Y-coordinates change by an amount equal to K where K is any integer.
Example 2
<div id="box-X"></div>
CSS
#box-X{
width:100px;
height:100px;
border:1px solid black;
position:absolute;
top:40px;
left:40px;
-webkit-transition:all 0.5s;
}
#box-X:hover{
-webkit-transform:translateY(200px);
}
On executing the code above we will see the translation of the box along the Y-axes. The box will be translated from (0,0) to (0,200), in other words a translation by an amount of 200px along the Y-axes. The same effect can be done by setting the "top" property equal to 200px.
![]()
Translation on X/Y-axes: translate(K1,K2)
This variant of method allows us to translate any element on the X-Y plane. Each X, Y coordinate can be translated independently of each other by an amount of K1 and K2 respectively.
Example 3
CSS
#box-X{
width:100px;
height:100px;
border:2px solid red;
position:absolute;
top:40px;
left:40px;
-webkit-transition:all 0.5s;
}
#box-X:hover{
-webkit-transform:translate(200px,200px);
}
On executing the code above, the element will be translated on the X-Y plane by an amount of 200px along the X-axes and 200px along the Y-axes. It is the same as the translation of an element from (0,0) to (200,200). The same can be done by setting both the "left" and "top" properties.
![]()
Translation on Z-axes: translateZ(K)
This variant of translation is mainly used in 3D transforms. It causes an element to translate along the Z-axes by an amount equal to K. To make this effect visible we nee to enable the 3D settings of CSS3. This can be done by setting the "transform-style" to "preserve-3d" and perspective distance.
Example 4
CSS
body{
-webkit-perspective:1000px;
}
#box-X{
width:100px;
height:100px;
border:2px solid red;
position:absolute;
top:40px;
left:80px;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 0.5s;
}
#box-X:hover{
-webkit-transform:translateZ(100px);
}
On executing the preceding we will see an element raised towards the user. This is because the element is translated along the Z-axes. The translation of the element on the Z-axes causes the distance between the user's eye and element to decrease and this decrement in distance causes the element to look larger than the original. In the code above the element center is transferred from (0,0,0) to (0,0,50). This effect cannot be done using the absolute position settings.
![]()
![]()
Translation on X/Y/Z-axes: translate3d(K1,K2,K3)
This variant of translation is also from 3D transformations. By using this method the user can translate the element on the X-Y-Z plane along the X-axes, Y-axes and Z-axes by an amount equal to to K1, K2 and K3 respectively. This effect requires you to enable the 3D effect on the web page as we did in the previous method.
Example 5
HTML
<div id="camera">
<div id="stub1"></div>
<div id="box-X"></div>
</div>
CSS
#camera{
-webkit-perspective:1000px;
}
#box-X{
-webkit-transform-style:preserve-3d;
width:100px;
height:100px;
border:2px solid red;
position:absolute;
top:40px;
left:40px;
background-color:rgba(50,50,50,0.5);
-webkit-transition:all 0.5s;
-webkit-transform:rotateX(85deg);
}
#stub1{
position:absolute;
top:40px;
left:40px;
width:200px;
height:200px;
border:1px solid black;
background-color:rgba(50,50,50,0.5);
-webkit-transform:rotateX(85deg);
}
#box-X:hover{
-webkit-transform:rotateX(85deg) translate3d(100px,50px,-50px);
}
On executing the code above the box-x coordinate will be translated from (0,0,50) to (100,50,0). This effect can't be done using an absolute position or any other setting.
![]()
Demo List
Summary
That's all for this article. I hope you have enjoyed reading this article and found it useful. In case of any doubt feel free to ask in the comments section.
Note: the code above will work in the Chrome browser only. Since CSS3 is new and all of it's feature are not implemented yet, you need to use a browser specific prefix if you are testing the code on various browsers. Some of the prefix codes are as follows:
- Chrome -webkit-
- Internet Explorer -ie-
- Firefox browser -moz-