Appearance

3D-effects ​

the 3d.css file bietet verschiedene dreidimensionale Transformationseffekte, the Ihrer Benutzeroberflache Tiefe and raumliches Gefuhl verleihen. these effects use CSS-Transformationen how Perspektive, Rotation and Translation, um 3D-Erscheinungen to erzeugen.

Overview ​

3D-effects verleihen Ihren UI-Elementen a zusatzliche Dimension, what for interaktive elements, Cardn, Galerien and others Components besonders effektiv be kann. the Casoon UI Library bietet a Sammlung vorgefertigter 3D-effects, the einfach angewendet become can.

Base-3D-effects ​

html
<!-- 3D-Transformationskontext -->
<div class="perspective">
  <!-- elements within this Containers can 3D-Transformationen use -->
  <div class="rotate-x">Um X-Achse rotiertes element</div>
</div>

<!-- Einzelne 3D-effects (enthalten own Perspektive) -->
<div class="rotate-x-15">Um 15° after hinten gekippt</div>
<div class="rotate-y-15">Um 15° zur Seite gedreht</div>
<div class="rotate-z-15">Um 15° rotiert (2D-Rotation)</div>

Perspektive-containers ​

html
<!-- Verschiedene Perspektiven -->
<div class="perspective-sm">Flache Perspektive (500px)</div>
<div class="perspective-md">Standard-Perspektive (800px)</div>
<div class="perspective-lg">Tiefe Perspektive (1200px)</div>
<div class="perspective-xl">very tiefe Perspektive (2000px)</div>

<!-- Perspektive with angepasstem Ursprung -->
<div class="perspective perspective-origin-top">Perspektive from oben</div>
<div class="perspective perspective-origin-bottom">Perspektive from unten</div>
<div class="perspective perspective-origin-left">Perspektive from links</div>
<div class="perspective perspective-origin-right">Perspektive from rechts</div>

Rotationseffekte ​

html
<!-- Rotation um X-Achse (Kippen) -->
<div class="rotate-x-5">Leicht after hinten gekippt (5°)</div>
<div class="rotate-x-15">Mittel after hinten gekippt (15°)</div>
<div class="rotate-x-30">Stark after hinten gekippt (30°)</div>
<div class="rotate-x-45">very stark after hinten gekippt (45°)</div>
<div class="rotate-x-neg-15">after vorne gekippt (-15°)</div>

<!-- Rotation um Y-Achse (Drehen) -->
<div class="rotate-y-5">Leicht zur Seite gedreht (5°)</div>
<div class="rotate-y-15">Mittel zur Seite gedreht (15°)</div>
<div class="rotate-y-30">Stark zur Seite gedreht (30°)</div>
<div class="rotate-y-45">very stark zur Seite gedreht (45°)</div>
<div class="rotate-y-neg-15">Zur anderen Seite gedreht (-15°)</div>

<!-- Rotation um Z-Achse (2D-Rotation) -->
<div class="rotate-z-5">Leicht rotiert (5°)</div>
<div class="rotate-z-15">Mittel rotiert (15°)</div>
<div class="rotate-z-30">Stark rotiert (30°)</div>
<div class="rotate-z-45">very stark rotiert (45°)</div>
<div class="rotate-z-neg-15">Entgegengesetzt rotiert (-15°)</div>

Kombinierte 3D-Transformationen ​

html
<!-- Komplexe 3D-Transformationen -->
<div class="rotate-x-15 rotate-y-5">Gekippt and leicht gedreht</div>
<div class="rotate-y-15 translate-z-20">Gedreht and after vorne gebracht</div>
<div class="rotate-x-neg-5 scale-105">Leicht after vorne gekippt and vergrossert</div>

Interaktive 3D-effects ​

html
<!-- Hover-effects -->
<div class="hover-rotate-x-15">Kippt at Hover after hinten</div>
<div class="hover-rotate-y-15">Dreht oneself at Hover zur Seite</div>
<div class="hover-flip-x">Flippt at Hover horizontal</div>
<div class="hover-flip-y">Flippt at Hover vertikal</div>

<!-- Klick-effects -->
<button class="active-push-3d">3D-Druckeffekt at Klick</button>

3D-Cardn (Flip-Cards) ​

html
<!-- Horizontale Flip-Card -->
<div class="flip-card-containers">
  <div class="flip-card">
    <div class="flip-card-front">
      Vorderseite the Card
    </div>
    <div class="flip-card-back">
      Ruckseite the Card
    </div>
  </div>
</div>

<!-- Vertikale Flip-Card -->
<div class="flip-card-containers-y">
  <div class="flip-card-y">
    <div class="flip-card-front">
      Vorderseite the Card
    </div>
    <div class="flip-card-back">
      Ruckseite the Card
    </div>
  </div>
</div>

3D-Cube-effect ​

html
<div class="cube-containers">
  <div class="cube">
    <div class="cube-face cube-face-front">Vorderseite</div>
    <div class="cube-face cube-face-back">Ruckseite</div>
    <div class="cube-face cube-face-right">Rechts</div>
    <div class="cube-face cube-face-left">links</div>
    <div class="cube-face cube-face-top">Oben</div>
    <div class="cube-face cube-face-bottom">Unten</div>
  </div>
</div>

Customization over CSS Variables ​

the 3D-effects can over CSS Variables angepasst become:

css
:root {
  /* Perspektive-Einstellungen */
  --perspective-sm: 500px;
  --perspective-md: 800px;
  --perspective-lg: 1200px;
  --perspective-xl: 2000px;
  
  /* Rotations-Winkel */
  --rotate-xs: 5deg;
  --rotate-sm: 10deg;
  --rotate-md: 15deg;
  --rotate-lg: 30deg;
  --rotate-xl: 45deg;
  
  /* others 3D-parameter */
  --translate-z-sm: 10px;
  --translate-z-md: 50px;
  --translate-z-lg: 100px;
  
  /* transition for 3D-effects */
  --transition-3d: transform 0.3s ease;
}

Accessibility and 3D-effects ​

at 3D-Effekten sind some wichtige Aspekte the Accessibility to note:

  1. Vestibular-Empfindlichkeit: some Nutzer leiden under Unsicherheit at starken Bewegungen and 3D-Effekten
  2. Reduzierte Bewegung: 3D-animations should for Nutzer with prefers-reduced-motion Setting reduziert become
  3. Verstandlichkeit: 3D-effects should the Nutzbarkeit and the Verstandnis the contents not beeintrachtigen
css
@media (prefers-reduced-motion: reduce) {
  .flip-card-containers:hover .flip-card,
  .hover-rotate-x-15:hover,
  .hover-rotate-y-15:hover,
  .hover-flip-x:hover,
  .hover-flip-y:hover {
    transition: none !important;
    transform: none !important;
  }
}

Performance-Uberlegungen ​

3D-Transformationen can rechenintensiv be:

  1. use them will-change: transform for wichtige interaktive 3D-elements
  2. Vermeiden them to many 3D-elements on einer Seite
  3. Bevorzugen them transform gegenuber anderen properties, the Repaints auslosen
  4. Testen them on mobilen Geraten for a gute Performance

Praktische Examples ​

Interaktive 3D-Produktkarte ​

html
<div class="perspective-md">
  <div class="product-card hover-rotate-y-15">
    <img src="product.jpg" alt="Produkt">
    <div class="product-info">
      <h3>Produktname</h3>
      <p>Produktbeschreibung</p>
      <span class="price">€29,99</span>
      <button class="active-push-3d">in den Warenkorb</button>
    </div>
  </div>
</div>

3D-button with Tiefeneffekt ​

html
<button class="button-3d">
  <span class="button-text">3D button</span>
  <span class="button-shadow"></span>
</button>

3D-Karussell ​

html
<div class="carousel-3d">
  <div class="carousel-containers">
    <div class="carousel-item" style="--item-index: 0">Item 1</div>
    <div class="carousel-item" style="--item-index: 1">Item 2</div>
    <div class="carousel-item" style="--item-index: 2">Item 3</div>
    <div class="carousel-item" style="--item-index: 3">Item 4</div>
    <div class="carousel-item" style="--item-index: 4">Item 5</div>
  </div>
  <div class="carousel-controls">
    <button class="prev">back</button>
    <button class="next">Weiter</button>
  </div>
</div>

Best Practices ​

  1. Dezent einsetzen: 3D-effects should subtil and zweckmassig be
  2. Consistency wahren: use them ahnliche 3D-effects for ahnliche UI-elements
  3. Tiefe as Note: use them 3D-effects, um Hierarchie and Interaktivitat to vermitteln
  4. Naturliche Bewegungen: ensure them on realistische and naturliche 3D-Transformationen
  5. Kontext note: ensure, that 3D-effects zum Gesamtdesign passen