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!
