Post
Ask Question

Understanding CSS3 Translation Methods

Introduction

In this article, we will learn about the translation 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 translation method.

  1. Translation on X-axes: translateX(K)
  2. Translation on Y-axes: translateY(K)
  3. Translation on X/Y-axes: translate(K1,K2)
  4. Translation on Z-axes: translateZ(K)
  5. 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 translation 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 an 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.

X-axes

Translation on Y-axes: translateY(K)

This variant of the method is used to translate 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 an 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.

Y-axes

Translation on X/Y-axes: translate(K1, K2)

This variant of the method allows us to translate any element on the X-Y plane. Each X, and 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.

X-Y plane

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 need 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 absolute position settings.

Z-axes

Z-axes 2

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 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.

Box-x coordinate

Output

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 its features 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-


Similar Articles