CSS

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!

Sue Smith works as a Web/ software developer and technical writer based in the UK: see benormal.info for details. Sue has written for various clients including Smashing Magazine and Mobiletuts+. She also does a little Android development and some comedy writing. More articles by Sue Smith
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress