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.
translate()
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
The example shows three div elements, that are transformed individually with the translate() function.
- The translation of element-1 visually is making no difference from its origin, because it has twice zero as translation-values.
- 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.
- 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); }
See also
Related articles
Transforms
- translate()
External resources
- CSS Transforms Module, Level 3, Section 13.1
- Mathematical Description of Transform Functions
- Hands On: 2D Transforms
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]