CSS Transform VS Position

Difference between Transform and Position

Transform attribute is more specific for pages that requires to manipulate an object such as a div. For example, if you want to rotate a div, you use transform:rotate(degrees) as CSS3 site shows here: CSS3 play rotation example. Also, transform lets you to move elements and scale them as it's explained here. Instead, position is more static meaning that you can choose where to put elements inside a web page. For example, if you are trying to position a div inside another div than you will use

position: absolute;
left: 20px;
right: 30px;

whereas to position an element relating to the normal border of the browser you will use

position: fixed;

and so on. Different types of position are shown here.

Hence, your code is correct in both ways and there is no difference. You should choose between one way or the other depending on what you want to do because transform is better to implement different kinds of effects to the elements while position is better to move elements inside another ones.

Position: relative vs Transform: translate

Example 1

• can be used in normal case

• supported by almost every browser - don't need to rewrite for other browsers

Example 2

• can be used for animations - using transform you can rotate object in three dimensions
• limited browser support (requires CSS3 so not early versions of IE nor Opera Mini)
• combined with using delay, you can animate rotation

CSS translation vs changing absolute positioning values

it is possible to achieve better performances with transform rather than position.

I'll quote a few bits from this excellent article, but you should really read it to get the whole picture:

http://www.html5rocks.com/en/tutorials/speed/html5/

Currently most browsers only use GPU acceleration when they have a strong indication that an HTML element would benefit from it. The strongest indication is that a 3D transformation was applied to it. Now you might not really want to apply a 3D transformation, but still gain the benefits from GPU acceleration - no problem. Simply apply the identity transformation:

-webkit-transform: translateZ(0);

reason behind this, is that you delegate some of the work that the CPU has to do, to the GPU, however be considerate as this won't necessarily be always worth, especially on a mobile device like the iPad, that is your environment:

Please be warned that this applying this transformation does not guarantee to help your performance. It might simply crank up your GPU, use up more battery but deliver the same performance as before. So be careful with this technique and only use it if you experience a true performance win.

translate() vs top/left for positioning

The code you posted is used to position an element vertically and horizontally centered. translate is used here because the percentage are relative to the element dimensions. The percentage values for top and left with position: absolute are relative to the dimensions of the first parent element with position set to relative, absolute or fixed.

---

Related Topics