perspective

perspective

Sets 3D perspective via --perspective. E.g. 1000px.

CSS Rules

.perspective {
  perspective: var(--perspective);
}

Usage

<element class="perspective" style="--perspective: /* value */;" />

Responsive

Prefix .perspective utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:perspective" style="--md-perspective: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="perspective:hover" style="--perspective-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="perspective:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before perspective::before" style="--perspective-before: /* value */;" />

<element class="content-after perspective::after" style="--perspective-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="perspective=value" />

<!-- Output -->
<element class="perspective" style="--perspective: value;" />

perspective-dramatic

Applies a dramatic (very shallow) 3D perspective distance to child transforms.

CSS Rules

.perspective-dramatic {
  perspective: var(--perspective-dramatic);
}

Usage

<element class="perspective-dramatic" />

Responsive

Prefix .perspective-dramatic utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:perspective-dramatic" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="perspective-dramatic:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="perspective-dramatic:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before perspective-dramatic::before" />

<element class="content-after perspective-dramatic::after" />

perspective-near

Applies a near 3D perspective distance to child transforms.

CSS Rules

.perspective-near {
  perspective: var(--perspective-near);
}

Usage

<element class="perspective-near" />

Responsive

Prefix .perspective-near utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:perspective-near" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="perspective-near:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="perspective-near:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before perspective-near::before" />

<element class="content-after perspective-near::after" />

perspective-normal

Applies a normal (moderate) 3D perspective distance to child transforms.

CSS Rules

.perspective-normal {
  perspective: var(--perspective-normal);
}

Usage

<element class="perspective-normal" />

Responsive

Prefix .perspective-normal utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:perspective-normal" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="perspective-normal:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="perspective-normal:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before perspective-normal::before" />

<element class="content-after perspective-normal::after" />

perspective-midrange

Applies a midrange 3D perspective distance to child transforms.

CSS Rules

.perspective-midrange {
  perspective: var(--perspective-midrange);
}

Usage

<element class="perspective-midrange" />

Responsive

Prefix .perspective-midrange utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:perspective-midrange" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="perspective-midrange:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="perspective-midrange:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before perspective-midrange::before" />

<element class="content-after perspective-midrange::after" />

perspective-distant

Applies a distant (deep) 3D perspective distance to child transforms.

CSS Rules

.perspective-distant {
  perspective: var(--perspective-distant);
}

Usage

<element class="perspective-distant" />

Responsive

Prefix .perspective-distant utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:perspective-distant" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="perspective-distant:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="perspective-distant:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before perspective-distant::before" />

<element class="content-after perspective-distant::after" />

perspective-none

Removes 3D perspective by setting perspective to none.

CSS Rules

.perspective-none {
  perspective: none;
}

Usage

<element class="perspective-none" />

Responsive

Prefix .perspective-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:perspective-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="perspective-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="perspective-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before perspective-none::before" />

<element class="content-after perspective-none::after" />