Transform Style

Preserve 3D space for nested transformed elements

Syntax

visual="transform-style:[value]"

Values

Value	CSS Output	Description
flat	transform-style: flat	Flatten 3D children
preserve-3d	transform-style: preserve-3d	Preserve 3D depth

Examples

<div visual="transform-style:preserve-3d">Nested 3D transforms preserved</div>

Preview

Transform Style

visual="transform-style:preserve-3d" - Flat or preserve 3D for nested transforms

flat

flat

preserve-3d

3D

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">flat</span>
    <div space="p:medium" visual="perspective:normal transform-style:flat rotate-x:20">
      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">flat</div>
    </div>
  </div>
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">preserve-3d</span>
    <div space="p:medium" visual="perspective:normal transform-style:preserve-3d rotate-x:20">
      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
    </div>
  </div>
</div>