Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

transform-style

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
transform-3d transform-style: preserve-3d;
transform-flat transform-style: flat;

Examples#

Basic example#

Use transform-3d to position children in 3D space:

{

transform-flat

1
2
3
4
5
6

transform-3d

1
2
3
4
5
6
}

<!-- [!code classes:transform-flat,transform-3d] -->
<div class="size-20 transform-flat ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
</div>

<div class="size-20 transform-3d ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
</div>

Without this, any children will only be transformed in 2D space and not in 3D space.

Responsive design#