perspective-*, backface-hidden, transform-gpu — depth and compositing control. This family contains 2 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
transform-gputransform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform-nonetransform: none;

Example#

example
html
<div class="perspective-[1000px]">
  <div class="rotate-y-12 backface-hidden">Card face</div>
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • transform-gpu hints the compositor for animation-heavy elements

utilities/transitions/transition-property|Transitions · utilities/animations/keyframes|Animations