translateZ()

Examples

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);
}

Syntax

translateZ ( <translation-value> )

Parameters

translation-value

A translation value.

Standards information

• CSS Transforms Module, Level 3, Section 13.2

See also

Related articles

Transforms

• inverse

• multiply

• rotate

• rotate3d()

• scale3d()

• skew()

• translate()

• translate3d()

• translateX()

• translateY()

• translateZ()

• backface-visibility

• transform-origin-z

• MSCSSMatrix

• translate

• JavaScript animation

Related pages

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

Attributions

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]