Open 9am opened 5 months ago
After I found a way to build a 'mousemove' sensor with CSS, the demo became one of my most-liked CodePen. And it opens my mind, I start to think about all the possibilities with :has()
& counter()
. So the other day when I rotated something in the Browser dev tools, it occurred to me that I can squse more from the sensor: Can it be built with only CSS?
The sensor I've built is a linear one whose output is a [x, y]
coordinates, maybe it also works for a radial sensor, ideally it will give me a [angle, dist]
tuple. I managed to do that finally and this is a demo to show how to take advantage of the new sensor (CSS only):
𐄡
## Build the Sensor ␥
### Get the `angle` ␥
Compared to the linear version, we'll need sensor cells aligned as pizza slices. Well, the layout can be easily done with `rotate()` and of course a hard code `counter()`, but how to cut pizza slices from the `block` element. Luckily, we have `clip-path`.
```
𐄡
𐄡
## The Eye ␥
Once got the sensor, we could build a really fancy demo with it. Like this 3D eyeball, it will not only follow the mouse in the right direction but also stare while the mouse moves away from the center since we have `[angle, dist]` data.
### The 3D eyeball ␥
It's possible to build simple 3D objects with CSS now, with the help of `perspective-style: preserve-3d` and 3D `transform`. An eyeball can be simulated with sliced circles piled up together.
To make this easier, I built a simple Web Component [`
## Closing thoughts ␥
Really need a native `counter-value()` for CSS, it would save a lot of the hard code `*:nth-child(n) {--index: n}` for this kind of experiment. Come on W3C!
Hope you enjoy this, I'll see you next time.
---
> ## @9am 🕘
> * Read more [articles](https://9am.github.io) at [9am.github.io](https://9am.github.io)
> * Find other [things](https://www.npmjs.com/search?q=%409am) I built on [GitHub](https://github.com/9am), [NPM](https://www.npmjs.com/search?q=%409am) and [CodePen](https://codepen.io/9am)
> * Contact me via [email](mailto:tech.9am@gmail.com)
> * [![Creative Commons License](https://i.creativecommons.org/l/by-nc-nd/4.0/80x15.png)](http://creativecommons.org/licenses/by-nc-nd/4.0/)