Analysis of scale scaling in css3 transform

This article mainly introduces the use of scale scaling in CSS3 transform. Friends who need it can refer to it

We will introduce it from three aspects below:

1.scale( x,y) Scale the element

X represents the horizontal scaling factor | Y represents the vertical scaling factor
Y is an optional parameter. If not set, it means both X and Y The zoom factor in the direction is the same. And subject to X.
transform:scale(2,2.5);
2. The scaleX(d80b5def5ed1be6e26d91c2709f14170) 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 through transform-origin
transform:scaleX(2);
3. The scaleY(d80b5def5ed1be6e26d91c2709f14170) 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.
transform:scaleY(2);

Finally let’s look at the compatibility writing method:

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 entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About CSS background and background-position analysis

About CSS Analysis on the use of before and :after pseudo-elements

The above is the detailed content of Analysis of scale scaling in css3 transform. For more information, please follow other related articles on the PHP Chinese website!