Monday, October 29th, 2007

Webkit CSS Transforms

Category: CSS, WebKit

<>p>Webkit now has CSS Transforms:

Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine transformations.

A transform can be specified using the -webkit-transform property. It supports a list of functions, where each single function represents a transform operation to apply. You can chain together operations to apply multiple transforms at once to an object (e.g., if you want to both scale and rotate a box).

At the moment transforms do not affect layout, so they are similar to relative positioning in that respect. We are exploring ideas for how to do transforms in ways that could affect layout.

Michael Daines got to work and created the following example that makes the logo bump and grind using this JavaScript:

javascript
< view plain text >
  1. HilariousWebkitTransform = {
  2.     angle: 0,
  3.     scale: 1,
  4.     scaleFactor: 1.01,
  5.     image: document.getElementById("gold-webkit-icon-in-box"),
  6.    
  7.     animate: function() {
  8.       this.angle += 1;
  9.       this.scale *= this.scaleFactor;
  10.      
  11.       if (this.scale > 2)
  12.         this.scaleFactor = 0.99;
  13.      
  14.       if (this.scale < 1)
  15.         this.scaleFactor = 1.01;
  16.        
  17.       if (this.angle > 360)
  18.         this.angle = 1;
  19.  
  20.       this.image.style.webkitTransform = 'rotate(' + this.angle + 'deg) scale('+ this.scale + ')';
  21.     }
  22.   }
  23.  
  24.   setInterval(function() { HilariousWebkitTransform.animate(); }, 10);

Webkit Transforms

Related Content:

Posted by Dion Almaer at 10:43 am
15 Comments

+++--
3.5 rating from 26 votes

15 Comments »

Comments feed TrackBack URI

Safari is on it’s way to being the #1 browser on the market. Microsoft should be scared.

Comment by Phill Kenoyer — October 29, 2007

Must. Have. This. SOON!!!

Comment by Kris G. — October 29, 2007

Ha! Interesting – sort of like MS’ old “matrix” filter stuff. If this sort of thing becomes more widely-adopted, I’m sure the dev community could come up with some fun (and maybe even, heaven forbid, practical) uses for it.

Comment by Scott Schiller — October 29, 2007

Exactly what CSS needs

Comment by Andy — October 29, 2007

Safari is on it’s way to being the #1 browser on the market.

In terms of quality? Yeah. Marketshare… not for a long damn time, and Firefox will probably beat them to it. Momentum abounds.

Comment by Trevor — October 29, 2007

Funny, but meaningless. Every browser have it’s own language extensions, but i think that doing things like that, the WebKit team have encouraged other companies to implement their own extensions…

Browser Sniffing 2.0 is on the way:

if(safari)putItToRotate(element);
else if(firefox)doAnotherCoolThing();
else if(ie)useDirectxAndBeHappy();

else showASorryMessage();

@Phill: Maybe our sons or grandsons will live in a world where the main browser isn’t IE6… and where Microsoft get scared and start to take care about Safari. Lots of good products still on darkness or as a choice of a small group, unfortunately.

Comment by Hudson Tavares — October 29, 2007

*smile* this feature is really present in all major browsers and indeed, every browser is doing it in its own way. For the sake of having the FF way also available on this page: You can use HTML chunks as foreign objects in SVG which does the exact same thing, just the other way around. Instead of doing SVG transforms in a HTML document, you do HTML rendering in a SVG document :)

Comment by Hans Schmucker — October 29, 2007

@Phill Kenoyer

You can’t actually be serious right? Safari will never be the #1 browser. Firefox is a long shot, and that will likely never happen. Welcome to reality.

Comment by xxdesmus — October 29, 2007

Thankfully, we have high-level frameworks

function bling() {
if(safari)putItToRotate(element);
else if(firefox)doAnotherCoolThing();
else if(ie)useDirectxAndBeHappy();
…
else showASorryMessage();
}

Comment by Michael Mahemoff — October 30, 2007

If they could all agree on SMIL2.1 instead of doing its own way…

Comment by Sergey Ilinsky — October 30, 2007

The nice thing about standards is that there are so many to choose from!

But as stated above, why not just a single api for all? Why force frameworks…

Comment by Utimer — October 30, 2007

Scott: That’s why I hope MS won’t wait 17 years to implement CSS3 transform. Heck they could claim they support CSS3, kinda like they support CSS 1 and 2 :)

Beside, affine transformations can be useful.

Comment by Mathieu 'p01' Henri — October 31, 2007

Show of hands:
Who else wanted something like this since 2003 or earlier?

*crazy*
Who else wants to use .svg files as clipping masks on images and text wrap areas on paragraphs?

Who else wants the ability to flip the appearance of elements horizontally and vertically?

Who else has crazy ideas that aren’t really all that crazy?

Comment by thinsoldier — November 4, 2007

@Michael: ROFLMAO. This is exactly what will happen, you’re a prophet!
@Sergey: SMIL: the world would be a better place if the modern browsers had 10% of it implemented. I wonder why only IE have some SMIL features.

Comment by Hudson Tavares — November 7, 2007

@xxdesmus – no I was just joking around and fantasizing.

Comment by pkenoyer — January 21, 2008

Leave a comment

You must be logged in to post a comment.