translate3d()

< css‎ | functions
Jump to: navigation, search

translate3d()

This article is Ready to Use.



Summary

Transform function for a 3d translation which moves an element on x-axis, y-axis and z-axis by the given values.


Syntax

translate3d ( <translation-value-x>, <translation-value-y>, <translation-value-z> )

Parameters

translation-value-x, translation-value-y, translation-value-z

translation-value-x and translation-value-y represent vector values x and y and can be a length or a percentage value.

translation-value-z is the third vector value and defines the translation in the direction of the z-axis (3rd dimension). Attention: It can only be a length value, percentage is not supported.

Examples

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

  1. The translation of the first element moves it 150 pixels to the right along the x-axis.
  2. The second element is moved 120 pixels down along the positive direction of the y-axis.
  3. The last translation of element-3 is moving the div 120 pixels in the negative direction of the z-axis. Note that you have to apply a value for the perspective also, since without it the translation is not visible.

CSS

.element-1 {
	transform: translate3d(150px, 0, 0);
}

.element-2 {
	transform: translate3d(0, 120px, 0);
}

.element-3 {
	transform: perspective(400) translate3d(0, 0, -120px);
}



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]