Interactive SNES Controller in HTML + CSS

#webdev #showdev #html #css

This past weekend, I created a demo using 3D CSS: an interactive SNES controller. The idea was to get a "realistic" version of the controller, coding it entirely with HTML and CSS.

The result are on this CodePen demo (link to full screen):

And it is interactive! Click on the top circle to change the camera angle, and press the buttons and joystick to see them going down and up.

One goal was to make it work using a mouse, keyboard, or a gamepad connected to the browser (I had to add a pinch of JS for that 😉), and it works! If you plug a game controller into your computer, you will see the buttons pressed as you press on the physical controller. The Gamepad API controls that, and I also used a library I developed to make it easier to handle (the Gamepad API is a bit different to other Web APIs.)

I have to admit that the 3D is a bit "fake." I am using actual 3D CSS and rotating/translating things in the three dimensions, but I am limiting the angles so I don't have to deal with the actual depth (something that Amit Sheen does greatly on his demos, but that I didn't want to deal with this time 😳).

The joystick/axis was challenging (the cross shape with rounded corners was a pain to do), but it was fun. And I got to play with transform-origin, so only the side that is being pressed goes down.