Notice:
The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

translateX()

< css‎ | functions
Jump to: navigation, search

translateX()

This article is Ready to Use.


Summary

Transform function for a 2d translation which moves an element on the x-axis by the given value.


Syntax

translateX ( <translation-value> )

Parameters

translation-value

Value for the translation across the x-axis. Can be a length or a percentage value.

Examples

The example shows three div elements, that are transformed individually with the translateX() function.

  1. The translation of the first element moves it 10 pixels to the right along the x-axis.
  2. You can also provide a negative value. In this case, element-2 is moved 20 pixels to the left, in the negative direction on the x-axis.
  3. Using a percentage value of 50 percent moves element-3 in x-direction by a value which matches 50 percent of the element-3's width. In this case element-3 has a 100 pixel width, so it is moved 50 pixels to the right.

CSS

.element-1 {
	transform: translateX(10px);
}

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

.element-3 {
	transform: translateX(50%);
}

View live example




See also

Related articles

Transforms













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]