Here are 3 things to start with:
1,Scale (x,y) to scale the elements
- X indicates a multiple of horizontal scaling y represents a scaling factor in the vertical direction
- Y is an optional parameter and is not set, which means that the scaling multiples in the two directions of the x,y are the same . and take x as the subject .
- Transform:scale (2,2.5);
2,
ScaleX (<number>)Elements are scaled only on the x-axis (horizontally).
- The default value is 1, the same as the base point at the center of the element. You can change the base point by Transform-origin.
- Transform:scalex (2);
3,
ScaleY (<number>)Elements scale elements only in the y-axis (vertical direction).
- The central position of the element as the base point. You can change the base point by Transform-origin.
- Transform:scaley (2);
Finally, let's look at compatibility notation :
- . 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;
- }