Export (0) Print
Expand All
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

translateZ() function

Specifies a translation by a given amount in the z-direction.

CSS Transforms Module, Level 3, Section 13.2




( <translation-value> )



A translation value.

Standards information


The following code snippet is an example of the translateZ function in use. When applied to a square blue div element along with the perspective function (which simulates depth), it has the effect illustrated in the image. (The light-blue square indicates the original position of the transformed element.)

div {    
  transform: perspective(500px) translateZ(-60px);

A square blue div with white text, after having the following transform functions applied to it: -ms-transform: perspective(500px) translateZ(-60px);

See also

Transform Functions
Mathematical Description of Transform Functions
Direct3D: Matrices
Hands On: 3-D Transforms



© 2015 Microsoft