CSS3 animation attribute series transform details scale_html/css_WEB-ITnose

Let’s start with the introduction of 3 aspects:

1, scale(x,y) Scale the element

🎜> Y is an optional parameter . If it is not set, it means that the scaling factor of X and Y in both directions is the same

. And

subject to X. Css code

transform:scale(2,2.5);

2. The scaleX() element only scales the element on the X-axis (horizontal direction).

The default value is 1, and the base point is also at the center of the element. The base point can be changed by transform-origin

Css code

transform:scaleX(2);

3. The scaleY() element only scales the element on the Y axis (vertical direction).

The base point is also at the center of the element. The base point can be changed through transform-origin.

Css code

transform:scaleY(2);

Finally, let’s look at the

compatibility writing method

:

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; 🎜>