Friday, July 17th, 2009

More on 3D CSS Transforms

Category: Browsers, CSS

<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:

  1. translate3d(x, y, z), translateZ(z)
  2.  
  3. scale3d(sx, sy, sz), scaleZ(sz)
  4.  
  5. rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),
  6.  
  7. perspective(p)
  8. -webkit-transform: perspective(500px) rotateY(20deg);
  9.  
  10. matrix3d()
  11.  
  12. -webkit-transform-origin now accepts three values, allowing you to specify a z offset for the transform origin.
  13.  
  14. -webkit-perspective
  15.  
  16. -webkit-backface-visibility

Jay Sparks has also been playing with these properties as he built a 3D draggable cube.

Related Content:

Posted by Dion Almaer at 5:39 am
5 Comments

++++-
4.6 rating from 35 votes

5 Comments »

Comments feed TrackBack URI

Very nice!

Comment by stoimen — July 17, 2009

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.

Comment by michelle21 — July 17, 2009

Apple is NOT going to be happy until the whole functionality of Quartz Composer is possible in Webkit!

Comment by Malic — July 17, 2009

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.

Comment by michelle21 — July 17, 2009

Leave a comment

You must be logged in to post a comment.