Friday, July 17th, 2009
More on 3D CSS Transforms
<p>Following up on the earlier coverage we are back with more info on 3D transforms. Simon Fraser has posted details on the WebKit blog.He shows off a couple of cool examples:
The post goes into detail on the new CSS such as:
CSS:
-
-
translate3d(x, y, z), translateZ(z)
-
-
scale3d(sx, sy, sz), scaleZ(sz)
-
-
rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),
-
-
perspective(p)
-
-webkit-transform: perspective(500px) rotateY(20deg);
-
-
matrix3d(…)
-
-
-webkit-transform-origin now accepts three values, allowing you to specify a z offset for the transform origin.
-
-
-webkit-perspective
-
-
-webkit-backface-visibility
-
Jay Sparks has also been playing with these properties as he built a 3D draggable cube.
Related Content:
4.9 rating from 29 votes
Very nice!
This sample has been around for a long time. its been posted on the non public apple developer site. If you have an apple developers account there are a real lot of webkit transform samples, Apple has done a really good job putting together a nice sample site for paid developers.
Apple is NOT going to be happy until the whole functionality of Quartz Composer is possible in Webkit!
And why is that bad…
I love tranformations , I use them all the time.
Apple follows standards, they may influence but they are not driving the htm 5 effort, which is what all this is part of.
Take the transformation above, apple posted that on the developer site last year.. (or at least something really similar) with 4 rotating ringes, gyrating around x, y, z axis. kind of useless. But I’ve created a proof of concept using dashcode of a photo album based on the rotating rings, each little square is a photo or document , clicking on it calls another transform which shows the full image or document.
If I can find the project file I will post a link.