First Ever 3D CSS WordPress Theme

CSS3 has some great support for 3D transforms, perspective, and animation. Currently Safari is the only browser that fully supports it, but I am hoping Firefox and Chrome will add support soon. With that we can take regular objects (WordPress posts in this case) and animate them. I created 3 different shapes the posts can form while rotating. Click a post to view a larger size.

View the Demo or Download the Theme

Note: the 3D and animation only work in recent versions of Safari. Though the site does degrade gracefully in other, less capable browsers. Update: Only Safari in Snow Leopard can fully run this demo. Unfortunately preserve-3d doesn’t appear to be supported in Safari Windows or in Chrome on any platform.

Update 2: Safari 5 added support for this demo on all platforms. Download the new version if you are browsing on Windows. Unfortunately Chrome still doesn’t have support.

In this screen cast the animation doesn’t look very smooth. But when viewed live all the animations are silky smooth. You’ll just have to try it for yourself.

I know this theme isn’t the most practical, but I would love to hear your thoughts on it. Also feel free to download it to learn more about how it works.

25 thoughts on “First Ever 3D CSS WordPress Theme”

    1. You’re right. It isn’t intended for use on a wide variety of sites, but instead to show what is possible.

  1. What a fantastic display of awesomeness :) I like the idea as this can be a great way to display the portfolio for a designer, for creative agencies and what not. I liked the idea however, the fact that it only works in safari (snow leopard) is kind of a turn off…

  2. What’s disappointing is that the other browsers will catch up soon enough, then Safari users will have to share this piece of cool with the rest of the world.

    What would rock though, is if it NEVER worked in IE; because IE doesn’t deserve to render something this good.

  3. >> What would rock though, is if it NEVER worked in IE; because IE doesn’t deserve to render something this good.

    Oh, really? Why so much hate?

  4. I hate IE as much as the next man/woman, but Chop’s comment kinda comes off as just ignorant.

    Also, this seems way more stylish than practical. Just because it’s using standard tech and not 3rd party stuff like Flash doesn’t mean it’s better. Flash has been doing stuff that visually looks and works like this since like Flash 5, and it’s old now. Runs smooth, though. Most super fancy CSS3 stuff I bump into now uses a boatload of javascript and runs SUPER SLOW.

    1. “I hate IE as much as the next man/woman, but Chop’s comment kinda comes off as just ignorant.”

      I completely agree. I want to see all browsers head this direction. Well said.

      Also since this is (almost) pure CSS, it runs pretty smoothly. The only JS is for switching classes for the different shapes.

  5. Wow, could this post be any more Apple-fanboy-ish?

    “Other, less capable browsers…” – like what? Chrome and Firefox?

    Up until a few DAYS ago, Safari was behind Chrome in HTML5 and CSS3 support. Now it’s basically equal to Chrome in support.

    The only reason this demo works only in Safari is because the author didn’t bother to utilize the proper functionality in Chrome and Firefox.

    Check out this demo from a YEAR ago in Firefox 3.5+:

    http://hacks.mozilla.org/2009/06/3d-transforms-isocube/

    For more detailed information on browser capabilities, see http://caniuse.com/

    1. The big difference between Webkit and and other rendering engines is the 3D perspective support and animation. Firefox can transform objects in 3D, but cannot do any animation.

      Chrome includes animation and 3D support, but the perspective is lacking, so it doesn’t look very good.

      This demo has worked in Safari 4 on macs for quite some time (note that the article was posted a month ago).

      The update to Safari 5 added better 3D support for Windows machines, but it has been out for a long time for mac users.

  6. This is quite cool. It will be very interesting to see how methods like these will be used in the future once the thechnology matures a bit. HTML5 and CSS3 will definately be the next “big thing” and it’s becoming clearer why Apple have decided to “turn their back” on Flash.

  7. I just checked out the demo today and it doesn’t show up as 3d boxes here in my browser (firefox). Did you change the design of the theme or should I change browsers? If ever I purchase and use it can I expect it to work across all browsers?

    Thanks!

Leave a Reply to Gir Bakalım Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>