3d CSS3 HTML5 Logo(code.bocoup.com)
code.bocoup.com
3d CSS3 HTML5 Logo
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.
9 comments
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.
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.
"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!
How did you manage to make something that only works on a Mac in Chrome?
Looks messed up under Windows...
Bravo!
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.
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.
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?
IE9 is supposedly way better than before - will it support stuff like this?
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.
It’s quite disingenuous to compare CSS transform to expression().
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...
Besides, expression evaluates on mousemove which is horrible for performance: http://blog.dynatrace.com/2010/02/16/the-real-performance-ov...
There are also DXImageTransform filter and VML
CSS 2D Transforms - yes. 3D - nobody knows.
"WebKit proprietary CSS extensions" are not "CSS3".
The "proprietary extensions" follow the CSS3 working draft: http://www.w3.org/TR/css3-3d-transforms/
Not really, the @keyframes syntax isn’t in there yet.
Can someone post a screenshot, to see how it is suposed to look? Its all messed up in Chrome dev on Windows
cool code, some perspective top to bottom might give it some additional "3d pop"
"safari 5 or chrome 9 on a mac"
Thank you for embracing the spirit of HTML5 and the Web.
Thank you for embracing the spirit of HTML5 and the Web.