What's the Difference Between CSS3 Translate Method and CSS2 Relative Positioning

What's the difference between CSS3 translate method and CSS2 relative positioning?

The two methods are not exactly the same thing: Translating an element will not require to change its top, left, right or bottom CSS properties, so in the same way offsetTop/offseLeft Javascript properties are not affected by a CSS translation. Beside, the position of the element could be also static (and thus no z-index is required)

If you use position: relative instead, you will change those properties to visually achieve the same effect.

Example Fiddle: http://jsfiddle.net/LkLey/

Of course if you have to deal with old browser (like IE8 or FF2) the necessary choice is relative positioning, otherwise I can't see a clear convenience on choosing one of the two methods (well, to be honest relative positioning has no need of multipe prefixes -moz-, -webkit- ... to work everywhere) so the choice is up to you (and it depends on the layout).

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

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.

What is the CSS transform:translate() property ultimately for?

what exactly is transform:translate() for, according to the makers of CSS3's spec?

It says:

For backwards compatibility with existing SVG content, this specification supports all transform functions defined by The ‘transform’ attribute in [SVG11].

As for the other parts of your question, not sure if it's possible to give a general answer.

I think it's best to run some performance test for your particular situation. That shouldn't be hard to do if your app is well-designed. Also, such design may allow for per-device optimization, where translations and offsets are used respectively.

When to use CSS positioning?

ALA has a nice tutorial (there're lots of examples)
CSS positioning can be especially useful when you need to position something that cannot be positioned within normal flow.

Why does left: 50%, transform: translateX(-50%) horizontally center an element?

The CSS left property is based on the size of the parent element. The transform property is based on the size of the target element.

Name: transform

Percentages: refer to the size of bounding box [of the element to which the style is applied]

http://www.w3.org/TR/css3-transforms/#transform-property

'top'

Percentages: refer to height of containing block

http://www.w3.org/TR/CSS2/visuren.html#position-props

If the parent is 1000px wide and the child is 100px, The browser would interpret the rules in your question as:

Example 1:

.prompt-panel {
    left: 500px;
    transform: translateX(-50px);
}

Example 2:

.prompt-panel {
    left: -500px;
    transform: translateX(50px);
}

CSS outline different behavior behavior on Webkit & Gecko

This inconsistent behavior of Gecko is well-known and quite adequately documented, although strangely not at MDN but at the SitePoint Reference:

Firefox up to and including version 3.5 will draw the outline outline around the content of an element that has overflowed its boundaries rather than around the element’s actual set dimensions.

This continues to affect all versions of Firefox. I don't see a viable workaround for it at the moment, other than to remove your absolutely-positioned div from its parent and place it relative to... something else.

transform3d' not working with position: fixed children

This is because the transform creates a new local coordinate system, as per W3C spec:

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.

There's not currently a work-around that I'm aware of.

It is also documented on Eric Meyer's article: Un-fixing Fixed Elements with CSS Transforms.

---

Related Topics