This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

See also

Related articles

Transforms

Related pages

Attributions