After my latest CSS3 experiment without images (Internet Explorer Pure CSS Logo), a friend suggested to create an animated 3D Super Mario Icon based on the 3D Retro Mario GIF image by Cezkid.
Well, this is the result of two weeks of work – an animated 3D Super Mario Icon built completely in CSS3 without images.
A still from Safari 5 with perspective and grids. Hover over the live demo to see this.
Demo
Demo: Pure CSS animated 3D Super Mario Icon
Best viewed with Safari 5 & Chrome 9.
Chrome prior Version 9 renders in 2D only due to an older Webkit engine.
Opera 10.6, Firefox 3.6 and IE9 are not supported.
Background
Please note that the source code is still a mess. You better not have a look at it ;-)
It’s based on top of my CSS 4D Framework I created therefor and will be released in the next few weeks (when it’s out of alpha).
tbc.
Wow, this is so amazing!
Amazing work!
I’ve never seen something before nor did I know it can be achieved with CSS… Impressive!
Why the hell would something ever be supported in only safari? L2Firefox bro.
At the time only Safari 5 is capable to render it, neither Firefox nor Chrome do support
translateZwhich is necessary to create 3D effects with CSS.This doesn’t mean, Safari (Webkit) is superior by any means, but both engines support different upcoming “standards”.
Check this http://cordobo.com/1630-internet-explorer-pure-css-logo/ in Firefox & Safari/Chrome and you’ll see FF has better results.
Works in the Sunrise browser!
Excellent Work Andreas
Anthony,
many thanks! Incredible what you did with Spiderman! And btw., I fell in love with your blog a while ago :-)
thanks, I’m glad you like them. I’ll be keeping an eye out for your “CSS 4D Framework” Sounds REALLY interesting!
cool.
the only question is – why?
Why? Mostly because it’s an
alternative to existing techniques like SVG. As I am a CSS developer, I mostly focus on CSS & front-end development and
creating the 3D Super Mario Icon was a good CSS3 practice for me.
And, yes, partly because “I can” ;-)
I’m more impressed by your IE logo but this is some incredible work, probably took a lot of time and aspirin.
It took me ~2 weeks and a bunch of aspirin ;-)
Nice job! The animation looks good in Safari.
I stopped breathing for a while when I saw it. This is awesome. Keep the good work!