CSS 3D Lighting Engine(photon.attasi.com) |
CSS 3D Lighting Engine(photon.attasi.com) |
Every time I see very well-done CSS animations, and especially when I see it extended into the realm of 3D graphics, I immediately think: To do all of this [animation/3D], the creator had to know a good bit about [animation/3D]. What makes them look at CSS and say "Yes! THIS is the language I want to do serious 3D work in!"?
Put less sarcastically: I find CSS to be a pain more often than not. What advantages do these Webkit-only CSS tricks have over WebGL? I was given the impression that the latter is more fully-featured.
Modeling 3D objects – like the Photon crane – with CSS is absurd! It was done solely for that initial "neato!" effect.
Hope that helps clear some things up.
I don't really know why, but I also find great joy in working in constrained environments, and usually end up learning something in the process.
Requirements
Photon relies on the WebKitCSSMatrix object, so WebKit
is the only browser engine currently supported.
The author should put a Chrome-only warning on the front page.
No idea what it's doing.Quite impressive work.
You could make it cross-platform (not webkit-only) by using a JS implementation of the WebKitCSSMatrix object, which happens to be available as part of the Firmin JS Animation library. It's a technique I use in Edit Room (link in profile) to support javascript controls for modifying 3D CSS transforms.
Here's the relevant file: https://github.com/beastaugh/firmin/blob/master/src/matrix.j...
You could use this when WebKitCSSMatrix doesn't exist, and support other browsers that support 3d transforms:
Something like:
//shim to create CSSMatrix object reference using either WebKit or Firmin implementation
if (!window.CSSMatrix) window.CSSMatrix = window.WebKitCSSMatrix || window.FirminCSSMatrix;
I've noticed in the past that CSS seems to have real problems with this in other cases as well.