The
scale(x,y) function scales an element by the defined factors horizontally and vertically, respectively. If only one value is provided, it will be used for both the x and y scaling.
The syntax is as follows:
transform scale(X scale vector, Y scale vector).
You also can transform an element on only one axis by using the following syntax:
transform:scaleX(X scale factor);
transform:scaleY(Y scale factor);
Here’s an example:
snippet
#element{
transform: scale(2,4);
}This causes the targeted element to appear twice as long in the X axis and four times as long on the Y axis.
snippet
#element{
transform: scaleX(2);
}This causes the targeted element to appear twice as long in the X axis but won’t change its size along the Y axis.
snippet
-webkit-transform: scale(1.5,0.25);
-moz-transform: scale(1.5,0.25);
-ms-transform: scale(1.5,0.25);
-o-transform: scale(1.5,0.25);
transform: scale(1.5,0.25);
As with translate, you can also use the
scalex(x) or
scaley(y) functions. These functions will scale only the horizontal dimensions, or only the vertical dimensions. They are the same as
scale(x,1) and
scale(1,y), respectively.
By default a scaled element will grow outwards from or shrink inwards towards its center; so the element’s center will stay in the same place as its dimensions change. To change this default behavior, you can include the
transform-origin property.
snippet
<h1>Put your <span>dukes</span> up sire</h1>
#ad3 h1:hover span {
color: #484848;
-webkit-transform: translateX(40px) scale(1.5);
-moz-transform: translateX(40px) scale(1.5);
-ms-transform: translateX(40px) scale(1.5);
-o-transform: translateX(40px) scale(1.5);
transform: translateX(40px) scale(1.5);
}
Note
Scaling an element doesn't correspond to changing its height and width (which would constrain only the width and height values but not resize the element)
