Firefox 3.1 gets cool web page transformations support

By Percy Cabello

Today’s Shiretoko (Firefox 3.1 codename) nightly introduces support for simple web elements transformations as CSS extensions originally proposed and implemented by the WebKit project.

The extensions include move, rotate, skew, scale and matrix operations for almost every web page element except plugins and popup menus among others. In the example below, Google’s main page and Wikipedia English home page have been embedded in transformed internal frames: moved, rotated and skewed. I also added some experimental transparency in the mix for a better effect.

You can try this code in today’s Firefox nightly:

<iframe style="width:500px; height:500px; -moz-transform:translate(100px, 50px) rotate(30deg) skew(20deg);" src="http://google.com"></iframe>
<iframe style="width:500px; height:500px; -moz-transform:translate(50px, 80px) rotate(-50deg) skew(-20deg); -moz-opacity:.70;" src="http://wikipedia.org"></iframe>

As said, these are still experimental features that haven’t been standardized yet (hence the -moz prefix), but as Keith Schwarz -the Mozilla intern largely responsible for the implementation- notes, now that there are already two implementations (Firefox and Safari) it should speed things up.

“It will be interesting to see what uses developers find for CSS transforms. Much of the functionality once reserved for plugins can now be directly integrated into CSS and Javascript, which hopefully will help web developers create more graphically exciting pages.”, added Keith in his announcement post.

Posted on September 15, 2008 - 11:40 am || More on Articles

Comments

temp-

September 15, 2008 11:40 am

w00t!

Reply

JJ

September 15, 2008 11:40 am

What nightly did you use? I tried with the most recent one (Sept 15th) and nothing happens.

Reply

jsa

September 15, 2008 11:40 am

This is really awesom, I’ll wait untill I see turned webpages :)

Reply

Ryan Scott Scheel

September 15, 2008 11:40 am

Can I request a test in speed using a combination of Javascript, CSS, and HTML where an object is drawn on the screen, say a green square. It is then translated 100px down the screen, 1px at a time as it goes from the start to finish (heck, make it more beautiful and include start and finish pictures. How long does it take to do this?

Reply

Morbus

September 16, 2008 11:40 am

Why does firefox have so few buttons on the screenshot? They didn’t decide to merge the stop and the reload button together did they? :\

Reply

ExecSeptember 16th, 2008 at 7:12 pm

Rightclick toolbar -> Customize

Reply

MR Lizard

September 16, 2008 11:40 am

I certainly hope this ‘feature’ can be turned OFF. The last thing I want is eye-bugging effects every time I click a link because some site developer thought it would be cool….

Reply

Firefox 3.1: Webseiten-Transformation per CSS - WinBoard - Die Windows Community

September 18, 2008 11:40 am

[...] voll funktionsfähig. Plug-ins lassen sich bislang nicht verändern. Ein Beispielcode der Webseite MozillaLinks zeigt, wie Sie die Funktionen selbst testen können. Abzuwarten bleibt, ob den Entwicklern sinnvolle [...]

Weblog » Firefox 3.1: WebKit DesteÄŸi

September 19, 2008 11:40 am

[...] MozillaLinks web sitesindeki örnek kod bu fonksiyonu nasıl test edebileceğinizi gösteriyor. Geriye ise geliştiricilerin yeni eklentiler için anlamlı özellikler bulmasını beklemek kalıyor. [...]

kral oyun

September 20, 2008 11:40 am

Good idea and perfectly works from firefox developers..

Reply

Actualidad Tecnologica - Firefox 3.1 añade transformaciones de páginas webs completas

October 11, 2008 11:40 am

[...] | Mozilla Links > Mozilla Developer Center Prueba | Solo para Firefox [...]

Firefox 3.1 beta 1 released and reviewed - Mozilla Links

October 14, 2008 11:40 am

[...] HTML 5 drag and drop specification will also ease this common task; while experimental support for CSS transformations and SVG effects for HTML elements dramatically expand the possibilities for web designers with [...]

orlando_ombzzz

October 14, 2008 11:40 am

percy, do you know if Firefox team have plans to fix the basic and old printing bugs? for example: in Linux this page “print preview” shows only 1 page:

http://creator.zoho.com/marketplace/

Reply

Percy CabelloOctober 14th, 2008 at 10:34 pm

As far as I know there are no big plans for printing improvements in Firefox 3.1, which is just a pity. Even on Windows, the main platform I work on, it has some serious limitations. If I recall correctly, the problem is there is a lack of developers with the necessary deep knowledge of the printing code to fix it.

Reply

Marc

October 16, 2008 11:40 am

Hello,

How to apply transforms by using javaScript ?

I tried .style.transform=’scale(0.5)’ and .style.mozTransform=’scale(0.5)’ without success

(for instance, in webKit, using .style.webkitTransform=’scale(0.5)’ works)

Thanks

Reply

Privacy, tabs and web content overhaul in Firefox 3.1 Beta 2 - Mozilla Links

December 8, 2008 11:40 am

[...] support for CSS transformations and SVG effects for HTML elements dramatically expand the possibilities for web designers with [...]

Qrikko

December 10, 2008 11:40 am

Yeah, I would like to know as well..

Using Safari I can write in a javascript:

.style['webkit-transform'] = “rotate(45deg)”; // Rotates 45deg when using safari

BUT I can’t seem to find anything like it for firefox, and I have even seen it from the developers sites. I was looking for something similar.. but it don’t seem to work like that.. is there still no way to do it or am I just doing something wrong?

I have tried a lot of variations by now.. it work great like this:

CSS
.myclass{
-moz-transform: rotate(45deg);
}

but if I in js try:
JS:
.style['-moz-transform'] = “rotate(45deg)”;

I come out empty..
(observe I tried around quite a bit, like .style.mozTransform = and so on.)

if nothing else is there a way to retrieve all things in the style or something..? hope someone have some more experience with this lot then me.

Reply

QrikkoDecember 10th, 2008 at 4:09 am

I have the answer after trying a while longer I found it.. it was the (a bit unsuspected):

.style.MozTransform = “rotate(45deg)”;

(OBS BIG M)

Reply

ShoaibDecember 17th, 2008 at 12:20 am

That helped, I didn’t have to bash my head against the wall. But one more thing. Is firefox considering transition effects and hence transition duration as webkit do?

Reply

Leave Comment