Today at lunch break I made a small scene in 3D to help my colleague to understand how 3D worked in pure CSS for a personal project, here’s the link.

WARNING: This page might cause motion sickness to some of you, open with care 🤗

https://sunetraalex.gitlab.io/3d-css-tunnel/

@justamoment@twtxt.net That’s awesome!

@justamoment@twtxt.net Nice. (My machine is not fast enough to render this smoothly, though. 🥴)

I published the source for anyone wondering how it’s made.

https://gitlab.com/sunetraalex/3d-css-tunnel

It is pure CSS and HTML, no JS or any libraries/frameworks.

The CSS for everything is, to my own surprise, shorter than expected, it’s really easy to follow in my opinion.

Fell free to ask if anyone has any doubts or want more explanations! 😊

Thanks you all!

@lyse@lyse.isobeef.org Yes, they are units related to the viewport:

• vh Height
  
• vw Width
  
• vmin Shortest side
  
• vmax Longest side
  

Used together with font-size allows me to use em units as a percentage that scale dynamically on any screen, keeping proportion on everything (like the border-radius of the rings).

Using viewport units is simple with good support and let me avoid using less supported rules like aspect-ratio or hacks like the padding-bottom trick (both to make squares or rectangles without a specific size).