3d CSS3 HTML5 Logo

http://code.bocoup.com/html5logo-3d

by boazsender • 15 years ago

23 17 15 years ago

code.bocoup.com

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

alttab• 15 years ago

no firefox?

chopsueyar• 15 years ago

No!

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_reala2• 15 years ago

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

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?

noibl• 15 years ago

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

est2• 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_reala2• 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...

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.

sid0• 15 years ago

"safari 5 or chrome 9 on a mac"

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

delinquentme• 15 years ago

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

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.

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

3d CSS3 HTML5 Logo

Related Stories