Analysis of scale scaling in transform of CSS3

This article mainly introduces the use of scale scaling in the transform of CSS3, and the need for friends to refer to the following

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.
Transform:scale (2,2.5);
2. The ScaleX (<number>) element scales the element 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.
Transform:scalex (2);
3. The ScaleY (<number>) element scales the element 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.
Transform:scaley (2);

Finally, let's look at the compatibility wording:

The code is as follows:

. 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;   }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!