Hidden Screenshot
317.494.7848
Why You Should Turn Your Clients into Japanese Robots ( …And How to Do it )

Disclaimer: As with any kind of advice, take it with a grain of salt before going full speed ahead.So, you need to create memorable characters in order to enhance the branding of the client you’re working for. What do you … Read More

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.

Box 1
A lot more info about the wonder and magic that is Box 1.
Box 2
A lot more info about the wonder and magic that is Box 2.
Box 3
A lot more info about the wonder and magic that is Box 3.
 

3D Triangles

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 dan@fatatom.com.

Daniel Waltz

About Daniel Waltz

Daniel Waltz is the Web Developer at Fat Atom Internet Marketing. Utilizing programming languages such as HTML, CSS, Javascript, and PHP, he works to recreate a web design in to a fully functional and interactive website using nothing but images, lines of code, and heavy/frequent use of caffeinated drinks. In his spare time he enjoys playing video games, listening to music, researching new tips and tricks of the web development trade, and playing the bass guitar.
Categories: Fat Atom Web Development
  • johndad5

    DAN! That is amazing! You have really come a long way since you started at the ripe ol' age of 16.

  • http://twitter.com/wozwas Jesse Johnson

    Good use of the Triforce dude.