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
- 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
- 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
- Transform:scaley (2);
Finally, let's see.
compatibility wording: CSS Code
- . test{
- -moz-transform:scale (2,2);
- -webkit-transform:scale (2,2);
- -o-transform:scale (2,2);
- Background:url (img/i.png) no-repeat;
- width:198px;
- height:133px;
- }
CSS3 Animation Property Series Transform scale Scaling