

Some pragmatic notes on CSS3 matrix3d transforms - 9elements
http://9elements.com/html5demos/matrix3d/

======
ionfish
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...](http://developer.apple.com/safari/library/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html)

~~~
jacobolus
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.

~~~
ionfish
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.

------
jamesu
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.

~~~
MrNibbles
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

------
iamwil
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?

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

~~~
jacobolus
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.

------
moses3k
Cool shit..

------
mirkec
thanks for sharing the info

------
supersoap
like the style of it ;)

------
korch
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.

~~~
jacobolus
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.

