translate()

< css‎ | functions
Jump to: navigation, search

translate()

This article is Ready to Use.



Summary

Transform function for a 2d translation which sets the position of an element to a new one, described by two vectors (x, y). The y value is optional.


Syntax

  • translate ( <translation-value-x> )
  • translate ( <translation-value-x>, <translate-value-y> )

Parameters

translation-value-x

Value for the translation across the x-axis. Can be a length value or a percentage value. Value for the y-axis translation is assumed to be zero.

translation-value-x, translate-value-y

First value describes the translation across the x-axis, the second across the y-axis. Values can be a length or a percentage value.

Examples

View live exampleThe example shows three div elements, that are transformed individually with the translate() function.

  1. The translation of element-1 visually is making no difference from its origin, because it has twice zero as translation-values.
  2. The second translation only provides a single translation-value-x, the second value is set to zero by default here. The div moves 20px to the right.
  3. For element-3 both translation-values are set. The div is moved 40px to the right and 80px down.

CSS

.element-1 {
	transform: translate(0, 0);
}

.element-2 {
	transform: translate(20px);
}

.element-3 {
	transform: translate(40px, 80px);
}



Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

Transforms


















































… further results


External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]