CSS and 3D. Useful or tacky?
With my time here at Fat Atom, I’ve been incredibly fortunate to be able to work on very unique and often challenging projects. As such, I have had the pleasure of learning much of the latest in web technologies to tackle these challenges in the most efficient manner. For numerous reasons the advancements made with the latest (and last) version of CSS, CSS3, really caught my eye early on.
After playing with and implementing many of the technologies fostered in CSS3, I must say that two in particular stood out to me as being incredibly fun to work with… CSS 3D transformations and CSS transitions. I emphasize the fun aspect because, at the time of writing, I have yet to discover a legitimate use for 3D transformations on any project I have been presented with.
As someone who is truly passionate about technology, much of my free time is also spent simply playing around with these new technologies. So in this article I’d like to share a couple of these side projects with you. Again, while none of these have any real use for my projects at Fat Atom at the time of writing, they can certainly aid in helping people understand what advancements have been made in CSS.
Note: These demos could also have been created using other web technologies such as the ever popular Adobe Flash. I assure you that the demos you see here require NO additional technology. All that is required is a modern web browser such as Google Chrome or Mozilla Firefox.
Two Sided Box
This is a very neat example I created based on the idea of only showing the content necessary and displaying additional information only when requested by the user. Hover your mouse over each box to learn more about it with a neat 3D spin effect.
In this demo I’ve created a Sierpinski triangle using 3D transforms to give the triangles depth.
These advances in CSS can provide vastly improved the levels of interactivity, making the web a more efficient and plain fun place to work/play/learn. If you have questions or would like to see the code behind these demos, feel free to send me an email at firstname.lastname@example.org.