Scaling Web Page Elements Using The CSS3 Scale Transform

CSS3 transforms allow you to apply various visual effects to the items in your Web pages, including scaling elements to either increase or decrease their size.

The scale transform requires only a single CSS declaration, but to ensure your pages work in the different CSS3 supporting browsers, you do need to add amended versions of the declaration to your code. As with any transform, you can apply the CSS3 scale effect on user interaction, as well as using an animated transition.

Create a Page

Create an HTML page with a simple element in it so that you can apply the CSS3 scale. You can use the following sample HTML5 page outline, which has an area for the CSS code in the head section:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div class="scales" onmouseover="this.className='scales scaleOn'" onmouseout="this.className='scales'">
I scale up and down
</div>
</body>
</html>

We are going to apply the scale transform when the user rolls their mouse over the element. The element class name is changed when the mouse rolls on and off it. In general, the element has the class name “scales” with “scaleOn” as an additional class name when the mouse is over it.

Apply Default Style Declarations to the Element

Add the following to your CSS section in the head area of your HTML page:

div.scales {
width:200px;
height:100px;
background-color:#FF00FF;
margin-left:200px;
margin-top:200px;
position:absolute;
}

This indicates the universal style for your element, whether the user’s mouse is over it or not. We define dimensions, position and background color so that you can see at a glance what effect the transform has.

Add the Scale Transform

Now for the scale transform. Add the following to the CSS section in your page:

div.scaleOn {
/*General*/
transform: scale(2, 5);
/*Firefox*/
-moz-transform: scale(2, 5);
/*Microsoft Internet Explorer*/
-ms-transform: scale(2, 5);
/*Chrome, Safari*/
-webkit-transform: scale(2, 5);
/*Opera*/
-o-transform: scale(2, 5);
}

Here we apply the scale transform, with a dedicated declaration for each of the supporting browsers. This may seem cumbersome but if you look closely at the code you’ll see that the variations are actually very similar – only the transform prefix differs for each browser.

In this case we are applying a scale of 2 along the X axis and 5 along the Y axis. This means that the element will grow to twice its original size in width and five times in height. If you provide only one value as parameter to the scale transform, this value will be used for both X and Y axes. Open your page in a browser and roll the mouse on and off it to see the effect. Notice that the content of the element, in this case a small amount of text, scales along with the element itself.

Use a Negative Scale

So far we have stretched an element using the scale transform, but you can alternatively shrink it, by supplying fractional values as parameters. Alter your code as follows to demonstrate:

div.scaleOn {
/*General*/
transform: scale(0.5, 0.8);
/*Firefox*/
-moz-transform: scale(0.5, 0.8);
/*Microsoft Internet Explorer*/
-ms-transform: scale(0.5, 0.8);
/*Chrome, Safari*/
-webkit-transform: scale(0.5, 0.8);
/*Opera*/
-o-transform: scale(0.5, 0.8);
}

Here we shrink the element to half its width and eight tenths of its height. Test your page again to see the result.

Combine Transform Effects

As you have seen, the scale effect scales your elements from the center. You can combine the effect with another transform, for example if you want the element’s top left corner to remain in the same position when it scales. To demonstrate, extend your code as follows:

div.scaleOn {
/*General*/
transform: translate(-25%, -10%) scale(0.5, 0.8);
/*Firefox*/
-moz-transform: translate(-25%, -10%) scale(0.5, 0.8);
/*Microsoft Internet Explorer*/
-ms-transform: translate(-25%, -10%) scale(0.5, 0.8);
/*Chrome, Safari*/
-webkit-transform: translate(-25%, -10%) scale(0.5, 0.8);
/*Opera*/
-o-transform: translate(-25%, -10%) scale(0.5, 0.8);
}

The translate effect moves the element position when it is scaled. The percentage values reflect the scale parameters, in this case moving the element up and back by the correct amount to keep the top left corner in the same place. To achieve the same effect while scaling up rather than down, see the following example code:

div.scaleOn {
/*General*/
transform: translate(50%, 200%) scale(2, 5);
/*Firefox*/
-moz-transform: translate(50%, 200%) scale(2, 5);
/*Microsoft Internet Explorer*/
-ms-transform: translate(50%, 200%) scale(2, 5);
/*Chrome, Safari*/
-webkit-transform: translate(50%, 200%) scale(2, 5);
/*Opera*/
-o-transform: translate(50%, 200%) scale(2, 5);
}

Use a Transition Effect

Since our scale effect is taking place on user interaction, we can build a level of animation into it by adding a transition. Inside the “div.scales” section of your CSS code, add the following:

/*general version*/
transition: 2s ease-out;
/*browser specific versions*/
-moz-transition: 2s ease-out;
-ms-transition: 2s ease-out;
-webkit-transition: 2s ease-out;
-o-transition: 2s ease-out;

You can add a variety of properties to the transition, in this case we just indicate a duration and easing effect.

Options

Finally, you can opt to use the scaleX and scaleY versions of the transform if you only need your element to grow or shrink along one axis. The following generic code demonstrates:

/*scale along X - grow in width*/
transform: scaleX(2);

/*scale along Y - shrink in height*/
transform: scaleY(0.3);

As you can see, CSS3 transform effects such as scale allow you to create stimulating, interactive pages – just remember lots of your website users will not be able to enjoy them yet!

SHARE THIS POST
  • Anonymous

    Sounds like an interesting concept..Would love to see a demo

  • Ryan

    DEMO.

  • http://web2feeds.com Web2 feeds

    This is very interesting and useful. Thanks!

  • http://twitter.com/domedlabels Domed Labels

    Thanks for sharing this, I am planning to move my site to html5 and css3 technology and this would be great help.

  • Lazyass

    Any chance of a demo for lazy people? :)

  • Peter

    Am I being thick here? Why the javascript to change classes… why not just use :hover?

  • http://getify.me/ Kyle Simpson

    Nice article, but I wish it had mentioned “transform-origin”, as that’s a much better solution than the one in this article where you have to manually calculate the translate values as relative percentages, etc. That solution is especially ugly if you’re already having to do other translation transforms while scaling. “transform-origin” is so much easier.

  • http://twitter.com/sinecto MomPopCapital.com

    Can this technique be employed to scale a webpage? I would like to display 3 or 5 or 7 columns of DIVs, with variable number height wise. It would be very useful then to display different pages of a site within those DIVs, but scaled down to size of those DIVs. Basically I want to scale down a webpage to fit into a DIV without any scrollbars or truncating content.

  • Micky

    Isn’t a negative scale the wrong word? Negative scale should mirror it in one of the axis.

  • http://michaelcalkins.com/ Michael Calkins

    Hover is not less reliable. Where did you read that and where can I get a copy?

  • leeO

    Hello, it’s been two years but I try anyway :)
    I would like to know if I can keep my current width and height and scale the image inside it on hover: dimensions don’t change but the image is zoomed inside those dimensions on hover. Thx