translateZ() CSS Function

Description

The translateZ() CSS function shifts the element relative to its original location by a specified value along the Z axis. The effect will be noticeable only when using perspective, rotating the element along the X or Y axes.

Syntax

transform: translate(tz);

Values

tzA <length> representing the z-component of the translating vector. A positive value moves the element towards the viewer, and a negative value farther away.

Any length units accepted in CSS are accepted as values - for example, pixels (px), inches (in), points (pt), etc. A positive value shifts forward, a negative one backwards. A value of 0 does not change the position of the element.

Example

HTML

<img class="translate" src="images/nature.jpg" alt="Nature Image">

CSS

.translate {

    transform: perspective(200px) translateZ(-60px);

}

Result

Browser Support

Desktop

?	?	?	?	?	?

Tablets / Mobile

?	?	?	?	?	?

Last updated by CSSPortal on: 1st December 2019

Support Us