3D Effects

The 3D effects of the Casoon UI Library offer a comprehensive collection of CSS transformations and perspective effects that give your UI elements spatial depth and dimensional interest.

Overview

The 3D effects are performance-optimized and respect user preferences for reduced motion. They can be used to position, rotate, tilt, and transform elements in 3D space.

Installation

Import the 3D effects modules via CSS:

@import '@casoon/ui-lib/effects/3d.css';

Available Classes

Basic 3D Transformations

Class	Description
.transform-3d	Enables 3D transformations for child elements
.perspective	Defines a perspective for better 3D effects
.preserve-3d	Preserves the 3D position of child elements

Rotation Effects

Class	Description
.rotate-3d	Rotation in all three dimensions
.rotate-x	Rotation around the X-axis
.rotate-y	Rotation around the Y-axis
.rotate-z	Rotation around the Z-axis (normal 2D rotation)

Flip Effects

Class	Description
.flip-3d	Flipping an element in 3D space (card flip effect)
.flip-x	Horizontal flip effect
.flip-y	Vertical flip effect

Scaling Effects

Class	Description
.scale-3d	Scaling in all three dimensions
.scale-z	Scaling along the Z-axis for depth effects

Transform Origin

Class	Description
.origin-center	Transform origin in the center (default)
.origin-top	Transform origin at the top
.origin-bottom	Transform origin at the bottom
.origin-left	Transform origin on the left
.origin-right	Transform origin on the right

Examples

Simple 3D Rotation

<div class="transform-3d perspective">
  <div class="rotate-y" style="--rotate-y-deg: 30deg;">
    I'm rotated 30 degrees around the Y-axis
  </div>
</div>

3D Flip Card

<div class="flip-container transform-3d perspective">
  <div class="flip-inner">
    <div class="flip-front">Front of the card</div>
    <div class="flip-back">Back of the card</div>
  </div>
</div>

<style>
  .flip-container {
    width: 300px;
    height: 200px;
  }
  
  .flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-container:hover .flip-inner {
    transform: rotateY(180deg);
  }
  
  .flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
  
  .flip-front {
    background-color: var(--color-primary-100);
  }
  
  .flip-back {
    background-color: var(--color-primary-200);
    transform: rotateY(180deg);
  }
</style>

3D Cube

<div class="cube-container transform-3d perspective">
  <div class="cube">
    <div class="cube-face cube-face-front">Front</div>
    <div class="cube-face cube-face-back">Back</div>
    <div class="cube-face cube-face-right">Right</div>
    <div class="cube-face cube-face-left">Left</div>
    <div class="cube-face cube-face-top">Top</div>
    <div class="cube-face cube-face-bottom">Bottom</div>
  </div>
</div>

<style>
  .cube-container {
    width: 200px;
    height: 200px;
    perspective: 800px;
  }
  
  .cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  
  .cube-container:hover .cube {
    transform: rotateY(180deg) rotateX(180deg);
  }
  
  .cube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .cube-face-front  { background: rgba(255, 0, 0, 0.2); transform: rotateY(0deg) translateZ(100px); }
  .cube-face-back   { background: rgba(0, 255, 0, 0.2); transform: rotateY(180deg) translateZ(100px); }
  .cube-face-right  { background: rgba(0, 0, 255, 0.2); transform: rotateY(90deg) translateZ(100px); }
  .cube-face-left   { background: rgba(255, 255, 0, 0.2); transform: rotateY(-90deg) translateZ(100px); }
  .cube-face-top    { background: rgba(0, 255, 255, 0.2); transform: rotateX(90deg) translateZ(100px); }
  .cube-face-bottom { background: rgba(255, 0, 255, 0.2); transform: rotateX(-90deg) translateZ(100px); }
</style>

Customization

The 3D effects can be customized via CSS variables:

:root {
  --perspective-depth: 1000px;
  --rotate-x-deg: 45deg;
  --rotate-y-deg: 45deg;
  --rotate-z-deg: 45deg;
  --rotate-3d-x: 1;
  --rotate-3d-y: 1;
  --rotate-3d-z: 1;
  --rotate-3d-deg: 45deg;
  --scale-3d-x: 1.5;
  --scale-3d-y: 1.5;
  --scale-3d-z: 1.5;
}

Accessibility

To improve accessibility, the 3D effects respect the user setting prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .rotate-3d,
  .rotate-x,
  .rotate-y,
  .rotate-z,
  .flip-3d,
  .flip-x,
  .flip-y {
    transition: none !important;
    animation: none !important;
  }
}

Browser Support

The 3D effects are supported by all modern browsers. For older browsers, a fallback to 2D transformations is provided.