Rotierenden 3D-Würfel entwerfen mit CSS ohne JavaScript
In diesem Tutorial erstellen wir mit CSS einen rotierenden 3D Würfel mit schönen Hover-Effekten. Es wird kein JavaScript gebraucht. 🎲
📝 Demo & Quellcode
● Demo: https://csscube.netlify.com
● Code: https://github.com/ScriptRaccoon/CSSCube
⏱ Zeitmarken
● Vorstellung 00:00
● HTML 00:58
● Beginn des CSS 03:51
● Seiten des Würfels 06:08
● Positionierung von Vorder- und Hinterseite 10:49
● Position der restlichen Seiten 15:43
● Rotation des Würfels 19:52
● Änderung der Perspektive 21:55
● Responsive Design 22:42
● Abschluss 25:40
📙 Quellen
● 3D-Transformationen in CSS: https://www.w3schools.com/css/css3_3d...
● min-Funktion in CSS: https://developer.mozilla.org/en-US/d...)
● calc-Funktion in CSS: https://developer.mozilla.org/en-US/d...)
● CSS-Variablen: https://www.w3schools.com/css/css3_va...
📺 Empfehlenswerte YouTube-Kanäle
● Kevin Powell: / kepowob
● Traversy Media: / techguyweb
● Dave Gray: / davegrayteachescode
● Meth Meth Method: / @meth-method
💻 Verwendete Tools (Entwicklung)
● Visual Studio Code: https://code.visualstudio.com/
● Live Server: https://marketplace.visualstudio.com/...
🎤 Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 16: https://www.blackmagicdesign.com/de/p...
#CSS #Tutorial #3D