CSS3 Animation Property Series Transform scale Scaling

Let's start with a 3 -part introduction:

1. Scale(x, y) scales The elements

• X represents a multiple of horizontal Scaling | Y represents the zoom factor in the vertical direction

• Y is an optional parameter that is not set, which means that the zoom multiplier is the same for X, y two directions . and take x as the standard .

CSS Code

1. Transform:scale (2,2.5);

2. ScaleX (<number>)Element scales elements only in the x-axis (horizontal direction).

• The default value is 1, as a base point at the center of the element. You can change the base point by Transform-origin.

CSS Code

1. Transform:scalex (2);

3. ScaleY (<number>)The element is scaled only in the y-axis (vertical direction).

• Base point is the same as the center position of the element. You can change the base point by Transform-origin.

CSS Code

1. Transform:scaley (2);

Finally, let's see. compatibility wording: CSS Code

1. . test{
2. -moz-transform:scale (2,2);
3. -webkit-transform:scale (2,2);
4. -o-transform:scale (2,2);
5. Background:url (img/i.png) no-repeat;
6. width:198px;
7. height:133px;
8. }

CSS3 Animation Property Series Transform scale Scaling