Transform Translate Z

Translate element along Z axis (depth) in 3D space

Syntax

visual="translate-z:[value]"

Values

Value	CSS Output	Description
0	transform: translateZ(0)	No Z translation
near	transform: translateZ(50px)	Move near (forward)
far	transform: translateZ(-50px)	Move far (backward)

Examples

<div visual="perspective:normal"><div visual="translate-z:near">Closer</div></div>

Preview

Translate Z (3D Depth)

visual="translate-z:near" - Move elements forward or backward in 3D space

translate-z:far

far

translate-z:0

0

translate-z:near

near

View Code

<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
    <div space="p:medium" visual="perspective:near">
      <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
    </div>
  </div>
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
    <div space="p:medium" visual="perspective:near">
      <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
    </div>
  </div>
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
    <div space="p:medium" visual="perspective:near">
      <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
    </div>
  </div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="transform:[custom-value]">Custom</div>