Home | Articles | Firefox 3.1 gets cool web page transformations support
-->

Firefox 3.1 gets cool web page transformations support

Published: September 15th, 2008
  •  Print

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.

You can leave a response, or trackback from your own site.

12 Comments on “Firefox 3.1 gets cool web page transformations support”

Subscribe to this post's RSS feed

  1. 1. temp-
    September 15th, 2008 at 11:58 am

    w00t!

    [Reply]

  2. 2. JJ
    September 15th, 2008 at 3:29 pm

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

    [Reply]

  3. 3. jsa
    September 15th, 2008 at 5:38 pm

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

    [Reply]

  4. 4. Ryan Scott Scheel
    September 15th, 2008 at 5:55 pm

    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]

  5. 5. Morbus
    September 16th, 2008 at 6:41 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]

  6. 6. MR Lizard
    September 16th, 2008 at 1:04 pm

    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]

  7. 7. kral oyun
    September 20th, 2008 at 6:14 am

    Good idea and perfectly works from firefox developers..

    [Reply]

  8. 8. orlando_ombzzz
    October 14th, 2008 at 10:18 pm

    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]

  9. 9. Marc
    October 16th, 2008 at 7:34 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]

4 Trackbacks/Pings (Trackback URL)

  1. 1. Firefox 3.1: Webseiten-Transformation per CSS - WinBoard - Die Windows Community September 18th, 2008 at 7:12 am
  2. 2. Weblog » Firefox 3.1: WebKit Desteği September 19th, 2008 at 10:17 am
  3. 3. Actualidad Tecnologica - Firefox 3.1 añade transformaciones de páginas webs completas October 11th, 2008 at 11:02 am
  4. 4. Firefox 3.1 beta 1 released and reviewed - Mozilla Links October 14th, 2008 at 4:59 pm

Leave a Reply




Comment:

Firefox 3

Links

  • Online Shopping
  • Document Scanning Services
  • 5GB free for your music
  • Voucher Codes & Discount Codes
  • CyberDefender Software
  • Recent Entries

    Recent Comments