A 3D WordPress Theme

I don’t think I’ve ever seen something like this before, a WordPress theme that has a 3-Dimensional post view. Nathan Barry over at LegendThemes has a screencast available showing off the theme in action with rotating post views and the different ways of viewing a post. Unfortunately, this theme is heavily dependent on the type of browser you’re using due to the use of CSS3. According to Nathan, only the most recent versions of Safari fully supports it.

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.

Since I don’t use Safari on my desktop, I was not able to check out the 3-D goodness. Would be cool for FireFox to support the various 3D Transforms in CSS3. In fact, it would be awesome if all of the major browsers supported it so we could see themes innovate the ways in which content could be viewed and interacted with.


10 responses to “A 3D WordPress Theme”

  1. So, really: what’s the point?

    Mac/Safari browser market share has to be sub-10%, since Mac itself is 10% (or less) of the OS market share. So, if you purchase the theme, 90+% of your purchase is going to be for the degraded theme. (Hope it’s a good one!)

    How is this any different than the late-90s craze of designing web sites using Microsoft IE-specific features (which led to the interwebs being plastered with “This Site Best Viewed in IE” images)?

  2. @Chip Bennett – This particular theme is available free of charge as I think it was more of a proof of concept than anything else. It would be really dumb to design commercial themes that are tied to one browser lol.

  3. Even if it’s free: what’s the point? Safari – as a whole, not just Mac/Safari – accounts for about 3% of the browser market.

    “Proof of concept” of non-standard browser features is exactly what led to the craptastic IE-locked-in internet of the late 90s.

  4. @Chip Bennett – Is this how you feel about anything that is proof of concept? I look at it as a glimpse as to what may be possible at some point down the road when at least 3 of the major browsers out there decide to support CSS3 but more specifically, the 3D transforms as noted in the post. Sure, they have no use right now, but it’s still cool to see that it can be done. It’s also neat to get a handle on what theme authors may be utilizing in the future.

  5. Once CSS3 goes from proposal to standard, I’ll be a bit less cynical. ;)

    As for the theme itself, it is interesting to see some of the possibilities, but I do wonder about the usability of such a theme. Using 3D just for the sake of having 3D elements comes across, on one level, as using BLINK back in the bad-old days: serves no purpose, but it’s eye candy (sort of).

    That said, I’m sure some very talented developers with an eye for usability will come up with some very creative and innovative uses for CSS 3D.

  6. Don’t bite me, but really, next to just making a point, I had not seen that either for WP. There’s not much webapps that take 3D that way. Even if that is beta code or just playing around. Thanks for sharing.

  7. @Jeffro: Thanks for the article. It was a lot of fun to build.

    @Chip: You’re right that this isn’t very practical. My goal was really to see what will be possible. Firefox has plans to add support for animations (though like Chrome I think their 3D perspective support won’t be for a while), so eventually it can be cross browser compatible.

    I am working on some more practical (and usable) uses of CSS3 animation, and I will post them when they are ready.

  8. @Chip The theme downgrades gracefully in other browsers. I think it looks better without 3D animations. Haha! :P

  9. Without doubt it is a cool concept, but it is just unfortunate that its not that practical until more browsers start supporting it.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: