Uploaded May 2025 | Updated September 2026, 2 weeks ago
How to fake 3D in CSS and create a sphere intersection using CSS and trigonometry.
π΄ Patreon: patreon.com/joyofcode
π Twitter: twitter.com/joyofcodedev
π¬ Discord: discord.com/invite/k6ZpwAKwwZ
π₯ Uses: https://www.joyofcode.xyz/uses
βοΈ Links
π CodePen: codepen.io/konstantindenerz/pen/xxyZJpO
π Svelte version: https://svelte.dev/playground/a3c2ff3f5ecb414383f8d8a503c10334?version=5.28.2
π Video made with Animotion: https://animotion.pages.dev/
π Timestamps
0:00 Intro
0:37 Creating The 3D Effect For The Walls
5:04 Using Trigonometry To Animate The Background
8:58 Using CSS Masks To Complete The Look
11:50 Creating The 3D Sphere And Animations
#joyofcode #3d #css
How to fake 3D in CSS and create a sphere intersection using CSS and trigonometry.
π΄ Patreon: patreon.com/joyofcode
π Twitter: twitter.com/joyofcodedev
π¬ Discord: discord.com/invite/k6ZpwAKwwZ
π₯ Uses: https://www.joyofcode.xyz/uses
βοΈ Links
π CodePen: codepen.io/konstantindenerz/pen/xxyZJpO
π Svelte version: https://svelte.dev/playground/a3c2ff3f5ecb414383f8d8a503c10334?version=5.28.2
π Video made with Animotion: https://animotion.pages.dev/
π Timestamps
0:00 Intro
0:37 Creating The 3D Effect For The Walls
5:04 Using Trigonometry To Animate The Background
8:58 Using CSS Masks To Complete The Look
11:50 Creating The 3D Sphere And Animations
#joyofcode #3d #css
