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.
If you enjoyed this post you should read my personal blog or subscribe to the iOS Design Weekly Newsletter.
[...] práctico, pero visualmente muy interesante y lleno de posibilidades. El tema 3D hecho con CSS3 que ha desarrollado Nathan Barry puede que sea el primero de su clase, pero seguro que pronto veremos muchos más que aprovechen las [...]
Good idea, however this theme isn’t cross platform, makes it hard to accept for larger audience.
You’re right. It isn’t intended for use on a wide variety of sites, but instead to show what is possible.
Nice theme and a great idea of design. Thanks for sharing.
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…
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.
>> 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?
[...] 3. First Ever 3D CSS WordPress Theme [...]
AMAZING!
Be nice to see it working on all browsers one day
CSS3 and HTML5 together will transform the web. It looks really awesome!
You know this thing called standards? no? nevermind.
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.
“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.
Really nice!
Works for me in Safari on Windows.
Ah, and here I got my 3D glasses out and was ready for an anaglyph/stereographic website. Oh well…
It’s very cool if you are a designer interested in CSS, but from a user’s point of view, it’s not that amazing, because with Flash there are similar effects.
Just Amazing, i cant imagine the possibilities.
The demo works beautifully on iPad and Safari 5 for Windows. Chrome and FireFox won’t be too far behind.
As a progressive enhancement, this is the future of web design.
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/
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.
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.
Who! I like it. May not be great for mainstream users, but for specialty sites, there’s some real possibilities.
The demo runs smooth on my Safari (Windows) – In your demo video it didn’t.
too bad it isn’t cross platform.
Great Job. Thank You….
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!