

3d CSS3 HTML5 Logo - boazsender
http://code.bocoup.com/html5logo-3d
Pure CSS 3D webkit animation, only works on a mac, uses hardware accelerated css transforms and @-webkit-keyframe animations.
======
po
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
"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
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
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
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.

~~~
robin_reala
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...](http://blog.dynatrace.com/2010/02/16/the-real-performance-overhead-of-
css-expressions/)

~~~
est
There are also DXImageTransform filter and VML

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

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

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

------
alttab
no firefox?

~~~
chopsueyar
No!

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

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

------
sid0
"safari 5 or chrome 9 on a mac"

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

