Comment rendre un CSS SLINKY en 3D

Braydon Coyer a lancé un CSS Art Challenge mensuel et m'a invité à faire don de mon livre Move Things with CSS en tant que prix. Le thème du premier mois est "Spring", qui me rappelle immédiatement le jouet de printemps - Slinky.

Cet article explorera comment utiliser CSS pour créer des effets 3D qui simulent le mouvement des escaliers de Slinky.

Structure HTML de Slinky

Pour contrôler le comportement de Slinky de manière flexible, nous utiliserons CSS pour personnaliser les propriétés. Voici la structure HTML écrite en carlin:

 - const ring_count = 10;
.récipient
  .scène
    .plane (style = `--ring-Count: $ {ring_count}`)
      - Laissez les anneaux = 0;
      tandis que les anneaux <ring_count .rring><p> Le HTML généré par ce code contient 10 éléments annulaires, chacun avec l'attribut <code>--index</code> pour représenter son index. </p>
<p></p>
<div><div><div style="--ring-count: 10">
<div style="--index: 0;"></div>
<div style="--index: 1;"></div>
<div style="--index: 2;"></div>
<div style="--index: 3;"></div>
<div style="--index: 4;"></div>
<div style="--index: 5;"></div>
<div style="--index: 6;"></div>
<div style="--index: 7;"></div>
<div style="--index: 8;"></div>
<div style="--index: 9;"></div>
</div></div></div>
<h3> Style CSS initial de Slinky</h3>
<p> Nous avons besoin d'une scène 3D. Le code CSS suivant définit les propriétés de Slinky et de ses scénarios:</p>
<pre class="brush:php;toolbar:false"> :racine {
  - Vieillement de la frontière: 1,2 VMIN;
  - Depth: 20vmin;
  - stack-height: 6vmin;
  --Scene-size: 20vmin;
  --SIZE: Calc (var (- Scene-Size) * 0.6);
  - Plane: gradient radial (RVB (0 0 0 / 0,1) 50%, transparent 65%);
  --ring-shadow: RGB (0 0 0 / 0,5);
  - Hue-one: 320;
  - Hue-Two: 210;
  --Blur: 10px;
  - SPEED: 1.2S;
  --BG: #fafafa;
  - ring-filtre: luminosité (1) Drop-shadow (0 0 0 var (- accent));
}

* {
  Dimensionnement en boîte: Border-Box;
  style transform: Preserve-3d;
}

.Container {
  hauteur: var (- taille de scène);
  largeur: var (- taille de scène);
  transformer:
    traduire3d (0, 0, 100vmin)
    rotatex (-24deg) rotatey (32deg)
    Rotatex (90deg)
    tradlatez (calc ((var (- profondeur) var (- pile-height)) * -1))
    tourner (0deg);
}

.scène,
.avion {
  hauteur: 100%;
  Largeur: 100%;
  Position: relative;
}

.avion {
  transform: tradlatez (var (- profondeur));
}

La transformation de .container se compose de plusieurs étapes, ce qui tourne finalement et localise la scène.

Style de bague slinky

Le code CSS suivant utilise des propriétés personnalisées --index et --ring-count pour localiser chaque anneau:

 .anneau {
  --origin-z: calc (var (- pile-height) - (var (- pile-height) / var (- ring-count) * var (- index));
  - Hue: var (- Hue-one);
  --Accent: HSL (var (- teinte) 100% 55%);
  hauteur: var (- taille de la bague);
  Largeur: var (- taille de la bague);
  Border-Radius: 50%;
  bordure: var (- largeur de bordure) Solide var (- accent);
  Position: absolue;
  en haut: 50%;
  Gauche: 50%;
  Transform-Origin: CALC (100% (var (- scène de scène) * 0,2)) 50%;
  Transform: tradlate3d (-50%, -50%, var (- origin-z)) tradatez (0) rotatey (0deg);
}

.Rring: Nth of-Type (Odd) {
  - Hue: var (- hue-two);
}

--origin-z calcule la position initiale de chaque anneau sur l'axe z, et transform se situe et tourne l'anneau.

Transformation et animation de l'anneau moulante

Afin d'atteindre les effets Flip et Fall de Slinky, nous devons calculer la position cible de l'axe Z de chaque anne Effet slinky --destination-z CSS. Les limites de l'animation CSS et les avantages des bibliothèques d'animation JavaScript telles que Greensock sont également discutées.

Résumer

Cet article explique en détail le processus complexe de l'utilisation de CSS purs pour créer des effets slinky configurables 3D, couvrant les structures HTML, les styles CSS, les implémentations d'animation et l'utilisation du stylet préprocesseur. Les limitations et les suggestions d'amélioration de l'animation CSS sont également discutées dans l'article. L'effet final est une animation slinde 3D configurable et personnalisable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!