Pivale's web experiments

A 3D IKEA Kallax unit. Change the colour. Spin it around. It shouldn't be done in HTML and CSS but I did it anyway! Another case of curiosity is responsible for this one. Not sure this one will ever make it into a project but the learnings along the way will most definitely come in useful should be need to build any basic furniture renders in pure HTML and CSS!

Yes that's right. It's a 3D interactive Toblerone bar built in HTML and CSS. Why? Because I wanted to know if I could do it. Should you do stuff like this? Almost certainly not. This did allow us to try out the cos() and sqrt() functions in CSS which is justification enough!! There are so many moving parts to this experiment and we're really pleased with how it turned out. Maybe next time we should try and use less elements though!

A 3D 330ml can of Beavertown Lupuloid IPA achieved purely using HTML and CSS. Javascript is present to allow you to control and explore the can from all angles, switch artwork, and turn off flashing animations. You can comment it out and the can will still be 3D! The can body was achieved by placing 36 divs in a row and rotating each one 10deg to complete the 360 degree cylinder shape. A background image is then applied with x position varying by iterations of the width of each div. You can also adjust a custom property to alter the scale of the can and it is responsive. Why did we do this? Because it seemed like a hard problem to solve and we'd love to use it in a project one day for a micro-brewery or craft ale company!

This codepen was created specifically to experiment with creating a 3D VHS object that could have artwork applied as part of our "just for fun" blog series. You can see the finished Drupal single directory component in action in our hacker movies blog article along with a 3D DVD object we also created. The component is implemented as a Drupal media entity which allows you to simply upload the artwork sleeve and then select an object type such as VHS or DVD and then the component takes care of the rest!

This codepen was created to experiment with a mimicking the inner and outer sleeves for a vinyl record. On hover you can see the 3D kick into action as well as the animation to rotate the record itself and pull the inner sleeve and vinyl from the outer sleeve. This would be something really cool for an ecommerce boutique record store where you upload the artwork for both the outer sleeve and the disc and everything else just happens like magic. Some future nice-to-haves might be to experiment with different coloured vinyls and splatter designs etc.