Getting all Minecraft with CSS
I recently stumbled across a great article on CoDrops written by Agustín Capeletto. The article discusses his concept of the Voxel – Minecraft styled 3d cubes arranged on a layered CSS grid that can be positioned to create all manner of weird and wonderful shapes. He’s even made a Voxel rendering engine!
This intrigued me, so I decided to play around building an interactive 3D text model with animations added via GSAP and native JS for the drag rotation.
You can view my live experiment here: https://daveholloway.uk/voxels
My example is a little heavy on the processing power, so can get a little laggy on some devices. The Voxel editor strips out unused faces to keep things leaner, but I had to include faces of every cube to enable the full 3D rotation. I’d therefore see this being more useful to smaller grids, maybe an 8x8 max instead of the 16x20 grid I’ve used below.
Still, it’s a cool structure with a lot of web animation potential.