3d CSS3 HTML5 Logo

23 points by boazsender 15 years ago | 17 comments

Pure CSS 3D webkit animation, only works on a mac, uses hardware accelerated css transforms and @-webkit-keyframe animations.

po 15 years ago |

Jeez guys, cut them some slack. It's a nice demo that happens to use a lot of features that aren't widely available yet.

The various browser vendors are never all going to sync their release schedules for new features. Now that we have some healthy browser competition and healthy forward movement on specs we can have either a) lowest common denominator sites or b) some sites that only serve a subset of browsers and either fail or fallback to less impressive tech.

Are we going to do this thing where we complain about every tech demo if it's not fully supported by all 4 or 5 major browsers? Sounds boring. When browsers come out with new features, I want to see demos showing what is possible. If you want to see it work on browser X then write a version that works on browser X and show us.

blocke 15 years ago |

"safari 5 or chrome 9 on a mac"

How did you manage to make something that only works on a Mac in Chrome?

Looks messed up under Windows...

Bravo!

ggordan 15 years ago | |

Try refreshing the page a few times. It worked for me (Chrome on Mac) the first time I tried it, but after clicking on it again it looks messed up.

Edit: My mistake. I was testing it out on a different browser first time around. I tried a few times with Chrome 10.* and it doesn't work.

clemesha 15 years ago |

Every time I see CSS3/HTML5 demos like this, I think "awesome, but what's the IE situation?". I mean that in a honest way, not in a "oh, that probably will never work on IE type of way".

IE9 is supposedly way better than before - will it support stuff like this?

est 15 years ago | |

IE introduced expression() in CSS decades ago. Like -webkit-transform, they are both private non-standard way of doing animations. IE4/5/6 even had hardware accelerated 3D graphic and dynamic music support, dHTML was cool before HTML5 coolkids took over.

ugh 15 years ago | | |

It’s quite disingenuous to compare CSS transform to expression().

robin_reala 15 years ago | | |

expression() gives you a functional method for defining animations; CSS transforms are declarative. They’re a different thing entirely.

Besides, expression evaluates on mousemove which is horrible for performance: http://blog.dynatrace.com/2010/02/16/the-real-performance-ov...

noibl 15 years ago | |

CSS 2D Transforms - yes. 3D - nobody knows.

thristian 15 years ago |

"WebKit proprietary CSS extensions" are not "CSS3".

olalonde 15 years ago | |

The "proprietary extensions" follow the CSS3 working draft: http://www.w3.org/TR/css3-3d-transforms/

robin_reala 15 years ago | | |

Not really, the @keyframes syntax isn’t in there yet.

alttab 15 years ago |

no firefox?

chopsueyar 15 years ago | |

No!

pedrokost 15 years ago |

Can someone post a screenshot, to see how it is suposed to look? Its all messed up in Chrome dev on Windows

delinquentme 15 years ago |

cool code, some perspective top to bottom might give it some additional "3d pop"

sid0 15 years ago |

"safari 5 or chrome 9 on a mac"

Thank you for embracing the spirit of HTML5 and the Web.