Transforms

Transforms Perspective

Utilities for set an element a 3D-space by affecting the distance between the Z plane and the user.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
transform-perspective-none	perspective: none
transform-perspective-200	perspective: 200px
transform-perspective-300	perspective: 300px
transform-perspective-400	perspective: 400px
transform-perspective-500	perspective: 500px
transform-perspective-600	perspective: 600px
transform-perspective-700	perspective: 700px
transform-perspective-800	perspective: 800px
transform-perspective-900	perspective: 900px
transform-perspective-1000	perspective: 1000px

Usage

With transform-perspective value set to 300.

rotate-y-45

-rotate-y-24

rotate-x-24

-rotate-x-24

Try hover above objects to see 3D perspective effect.

With transform-perspective value set to none to disable 3D perspective.

rotate-y-45

-rotate-y-24

rotate-x-24

-rotate-x-24

Try hover above objects to see effect.

<div class="transform-perspective-300">
  <div class="transform rotate-y-45 (hover)-rotate-y-0 ... height-32 width-32 ... bg-tint-granite-5 ... transition duration-500 linear"></div>
</div>

<div class="transform-perspective-300">
  <img class="transform rotate-y-45 (hover)-rotate-y-0 ... height-32 width-32 ... bg-tint-granite-5 ... object-cover object-fit overflow-hidden ... transition duration-500 linear" src="..">
</div>

HTML

.dummy-parent {
  @extend
    .transform-perspective-300;
}
.dummy-child {
  @extend
    .transform,
    .rotate-y-45,
    (hover)-rotate-y-0,
    .height-32,
    .width-32,
    .bg-tint-granite-5,
    .transition,
    .duration-500,
    .linear;
}

SCSS