Pure CSS animated 3D Super Mario Icon

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.

Pure CSS animated 3D Super Mario
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.

Pure CSS animated 3D Super Mario Icon

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).

Featured by

Smashing Magazine
1st webdesigner

37 thoughts on “Pure CSS animated 3D Super Mario Icon”

  1. Pingback: Pure CSS animated 3D Super Mario Icon | Cordobo | My Blog
    1. 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” ;-)

Leave a 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>