3D & Depth

3D Tilt

Auch genannt Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt

Eine Karte dreht sich perspektivisch zum Zeiger, und geschichtete Inhalte heben sich von der Oberfläche ab.

Produkt- und Preiskarten

  • tilt only
  • tilt with glare
  • layered translateZ children
  • 3D Card Effect
  • vanilla-tilt
  • Reverse tilt

Quellcode der Demo ansehen

Prompt

Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.

Füge bei [wo] einen „3D Tilt“-Effekt hinzu (auch perspective tilt oder tilt card genannt).
Die Karte soll sich perspektivisch zum Zeiger neigen, während er sich bewegt, ihre inneren Ebenen heben sich in unterschiedlichen Tiefen ab, und beim Verlassen gleitet sie sanft zurück in die Ebene: weich und dezent.
Halte die Neigung sanft, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) flach.

Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.