Some pragmatic notes on CSS3 matrix3d transforms(9elements.com)

36 pointsby 9elements16 anni fa15 comments

Some pragmatic notes on CSS3 matrix3d transforms

http://9elements.com/html5demos/matrix3d/

15 comments

The CSS 2D [1] and 3D [2] Transforms Modules specify that browsers should expose an implementation of the CSSMatrix interface; unfortunately, only WebKit does this at the moment. However, since that's also the only browser in which the CSS 3D Transforms Module is implemented, it doesn't really matter too much yet. WebKitCSSMatrix [3] provides most of the low-level code you'll want to generate 3D transforms, including the fundamental multiply and inverse methods, along with convenience methods for scaling, translating, rotating elements around the x, y and z axes and rotating around arbitrary (three-dimensional) vectors.

[1] http://www.w3.org/TR/css3-2d-transforms/

[2] http://www.w3.org/TR/css3-3d-transforms/

[3] http://developer.apple.com/safari/library/documentation/Audi...

jacobolus16 anni fa

The CSS 2D transforms are frustratingly crippled in my opinion. Instead of allowing the specification of a full 3x3 matrix for doing homogeneous coordinate transformations (and thus general perspective transforms), only a 2x3 matrix can be specified. I’m really glad they actually give access to the whole 4x4 matrix in the 3D version.

ionfish16 anni fa

Yes, it's a big improvement. The WebKitCSSMatrix implementation is actually compatible with both specifications: it provides getters and setters for elements a-f as well as m11-m44, and serialises to "matrix(a, b, c, d, e, f)" if the matrix is affine.

jamesu16 anni fa

The 3d transforms in webkit are pretty neat. In fact, I played about with generating 3d transforms using data from Blender a while back ( http://github.com/jamesu/csstransformexport/ ), with some success.

Still, needs more browser support.

MrNibbles16 anni fa

Really interesting idea,

i wonder when a company will release canvas/css3 visual design tools comparable to flash. I seem to remember Steve Jobs mentioning in a keynote that Adobe should be building tools for this exact purpose.

I havent tried out your code, but it is definitely an interesting prospect

iamwil16 anni fa

I don't know... You don't need to be a math god at all. It's basic linear alg. I guess lin alg isn't required in CS?

sesqu16 anni fa

It's basic university math, yes. But very few people are currently taking basic linear algebra, so it's nice to have better documentation.

jacobolus16 anni fa

It’d be nice to have better docs, but it’s not especially in scope for browser docs. Instead, someone should point to some good basic resources about linear algebra: matrix math, homogeneous coordinates, eigenvectors and eigenvalues, etc.

This particular blog post doesn’t really say much.

nix16 anni fa

Homogeneous coordinates are not linear algebra. Translation is simple, but few people actually understand how the perspective transformation works - it's a convenient hack but if you try to figure it out from scratch you may be surprised by what's going on.

moses3k16 anni fa

Cool shit..

mirkec16 anni fa

thanks for sharing the info

supersoap16 anni fa

like the style of it ;)

korch16 anni fa

I don't think it's such a great thing that the freshmen linear transforms for 3d manipulation are finding their way into the top-most level of the web stack(Javascript + CSS)

These transforms are already built into the the lowest level in the video hardware and accessed directly through specialized drivers.

While the imaginative side of me wants nothing more than to see web designers go buckwild with 3d, the engineer side of me want to congratulate everyone on slowing down the web even more.

pavlov16 anni fa

Like you say, 3D matrix transforms are already included in the low-level graphics APIs that are increasingly being used to accelerate element compositing in modern browsers. So why not make this functionality available to web content creators through CSS?

When you're on the GPU, rendering a quad with plain old scale+translate is just as fast as rendering it with a full 3D transform (with the important twist of potentially increased texture sampling and edge antialiasing requirements, of course).

jacobolus16 anni fa

No, no, a thousand times no to your whole outlook here. If powerful general APIs are provided, people will build the (hopefully open source even) abstractions on top which wrap those up in cute, easy-to-read, easy-to-use bundles of functionality. JavaScript should have access to some real binary data type, should have some general APIs for doing fast math on those types, should have direct-ish access to APIs like cryptography and data compression, &c.

The reason that the web is built on a giant pile of hacky taped-together spaghetti (to mangle some metaphors) is that instead of providing access to real low-ish level features, every browser has had its own special set of half-baked high-level APIs and leaky abstractions.

So, for example, I hope that WebSocket stays as simple as possible, the way it is now (the way Ian Hickson argues for it to stay), instead of sprouting complex authentication, encryption, specialized compression, various multiplexing and tricky framing features, &c. &c. on top (as the Java community and the IETF mailing list on the subject keep bickering about).

The worst thing that can happen for the language and its community of developers is to continue to be treated as second-class novices who need our hands held and must be guided through APIs providing the precise features envisioned by some enlightened browser vendor. If instead we’re treated like adults, there are plenty of really really smart JavaScript coders who will be happy to experiment with abstractions on top of the language and give the high-level website developers awesome tools, which can evolve and grow over time. We should be making it possible in the language John Resig to build jQuery and processing.js, rather than making it easy for Joe Random Developer to access some specific high level thing in as few lines as possible.