Post

Niels Leenheer
@html5test.com

DOOM fully rendered in CSS. Every surface is a <div> that has a background image, with a clipping path with 3D transforms applied. Of course CSS does not have a movable camera, so we rotate and translate the scene around the user.

CSS by T. Afif
@css-only.dev

Looks like I am not the only one working (secretly) on a CSS Doom project 😅 Are you managing to add enemies, interaction, etc later?

0 reposts24 likes

Niels Leenheer
@html5test.com

I had a lot of code lying around from my DOOM on a oscilloscope experiment. So this was relatively “easy”. So most of the hard work was already done. But yes. Enemies. Doors. Animating textures. But what I really want to do is use as much CSS math as possible. bsky.app/profile/html...

Niels Leenheer@html5test.com

So I build an oscilloscope emulator in the browser, so I could continue my little project while my old scope got repaired. That took a while. So I bought 5 other antique scopes. I now have 6. None of them work quite right. But at least I am having fun.

CSS by T. Afif
@css-only.dev

The trickiest part would be a CSS-only keyboard movement. That's what I am working on. I found a few ways to have basic movements but to move freely in a 3D scene is too complex to achieve 😫 (maybe you will find some ideas) For now, I am stuck with 2D games 👇 😆

CSS by T. Afif@css-only.dev

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: codepen.io/t_afif/full/... via @codepen.io ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.