CSS 3D-Effekt: Balken, die sich um Logo drehen

[Matthias Scharwies]

Servus!

Ich hab dafür mal ein Fiddle erstellt: Beispiel

An und für sich funktioniert es schon ganz ok,

finde ich auch!

Du könntest background: linear-gradient(180deg, rgba(8,8,8,1) 0%, var(--color) 50%, rgba(11,11,11,1) 100%); vereinfachen, indem du analog zu --i den Farbwert als custom property einsetzt. Dann wären die Klassen überfüssig.

Evtl. könntest du anstelle der z-index eine 3d-Transformation um das Logo herumführen und hättest da einen besseren optischen Effekt.

• CSS/Tutorials/Transform/3D-Transforms

Grad geschaut: mix-blend-mode ist leider nicht animierbar

• CSS/Tutorials/Vermischen_mit_Blend-Modes

Herzliche Grüße

Matthias Scharwies