Rotate a CSS 3D cube with an Arduino
I had a 3 axis gyroscope laying on my prototyping bench and I thought it would be cool to use it for something. Something with HTML and CSS…
A CSS 3D cube
I recently spent some time playing with 3D transforms and creating 3D objects in CSS. You can construct a cube for example buy rotating and moving 6 divs in 3D, one for each side of the cube. It’s also possible to rotate the finished object by only rotating the parent DOM element.
The idea was to combine the two techniques together: read the gyroscope sensor with an Arduino UNO, stream the data to the browser through the USB port, a Node.js server and WebSockets. Once I have the gyroscope sensor values in the browser I apply that to the transform CSS property and rotate the cube.
The gyroscope I have is quite simple and it only detects the rotation of the sensor and not the acceleration. Reading the values with the Arduino was quite straight forward. I used the examples published on Sparkfun’s website.
Getting the sensor readings from the Arduino to the Node.js server then to the browser is a longer process. I received lot of requests for going into more detail and explaining this process further so I decided to write and publish a completely free ebook for beginners.
Once you have the sensor values in the browser from the Node.js server through the WebSocket you can construct a CSS transform property that rotates the cube for you.
I had to divide the rotation values by two because the cube was rotating faster then the sensor was rotating in real life. The cube was also slightly off centre compared to the sensor so I added +44 to calibrate it.