Monday, October 29th, 2007
Webkit CSS Transforms
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:
-
-
HilariousWebkitTransform = {
-
angle: 0,
-
scale: 1,
-
scaleFactor: 1.01,
-
image: document.getElementById("gold-webkit-icon-in-box"),
-
-
animate: function() {
-
this.angle += 1;
-
this.scale *= this.scaleFactor;
-
-
if (this.scale> 2)
-
this.scaleFactor = 0.99;
-
-
if (this.scale <1)
-
this.scaleFactor = 1.01;
-
-
if (this.angle> 360)
-
this.angle = 1;
-
-
this.image.style.webkitTransform = 'rotate(' + this.angle + 'deg) scale('+ this.scale + ')';
-
}
-
}
-
-
setInterval(function() { HilariousWebkitTransform.animate(); }, 10);
-
Safari is on it’s way to being the #1 browser on the market. Microsoft should be scared.
Must. Have. This. SOON!!!
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.
Exactly what CSS needs
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.
*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 :)
@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.
Thankfully, we have high-level frameworks
function bling() {
if(safari)putItToRotate(element);
else if(firefox)doAnotherCoolThing();
else if(ie)useDirectxAndBeHappy();
…
else showASorryMessage();
}
If they could all agree on SMIL2.1 instead of doing its own way…
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…
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.
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?
@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.
@xxdesmus - no I was just joking around and fantasizing.