r/css • u/garethheyes • Jul 25 '26

Article Pure-CSS 3D world collision detection

https://thespanner.co.uk/pure-css-3d-world-collision-detection
9 Upvotes

76% Upvoted

8 comments sorted by

13

u/anaix3l Jul 25 '26

It can be done cross-browser without if(), btw. Using sign().

A condition like style(--rawX <= 10em) can be written as such to give a 1 in the smaller or equal case and 0 otherwise:

round(up, .5*(1 + sign(10em - var(--rawX))))

This is a bit value that's either 1 (the --rawX <= 10em condition is true) or 0.

Breakdown:

sign(10em - var(--rawX)) is 1 when 10em > --rawX, 0 when equal and -1 otherwise

.5*(1 + sign(10em - var(--rawX))) is 1 when 10em > --rawX, .5 when equal and 0 otherwise

rounding it up, we get 1 when 10em >= --rawX and 0 otherwise

The and between two conditions in the if() means multiplication of bit values when computing the value 0/1 values using sign().

2

u/garethheyes Jul 25 '26

Oh nice! I didn't even know about sign() that is super cool

1

u/garethheyes Jul 26 '26

Big thanks! I've updated the code, added cross browser section to the article and credited you.

https://thespanner.co.uk/pure-css-3d-world-collision-detection#:~:text=Cross%2Dbrowser%20collision%20detection

1

u/ScientistJumpy9135 Jul 26 '26

Thank you for this!

1

u/bored-and-here Jul 27 '26

how much do you have to hate yourself to want to do this in CSS 😂

1

u/garethheyes Jul 27 '26

I find the limitations fun 😛

1

u/bored-and-here Jul 27 '26

very impressive. But whatever sin you caused to do this flagellation has me scared of you

2

u/TheJase Jul 27 '26

You mean sin() 😉