Warp-scaling scale ()

Warp-scaling scale ()

The zoom scale () function allows the element to scale the object based on the center Origin point.

Scaling scale has three scenarios:

1, scale (x, y) scales the element horizontally and vertically (i.e., the X-axis and Y-axis are scaled simultaneously)

For example:

{  -webkit-transform: Scale (1.5,0.5);   -moz-transform: Scale(1.5,0.5)  Transform:scale (1.5,0.5);}

Note: Y is an optional parameter, and if you do not set the Y value, the zoom multiplier for x, y two directions is the same.

2, ScaleX (x) elements are only scaled horizontally (x-axis scaling)

3, ScaleY (y) elements are only scaled vertically (Y-axis scaling)

HTML code:

<class= "wrapper">  <Div> I'll zoom in 1.5 times times </div></div>

CSS code:

. Wrapper{width:200px;Height:200px;Border:2px dashed Red;margin:100px Auto;}. Wrapper Div{width:200px;Height:200px;Line-height:200px;background:Orange;text-align:Center;Color:#fff;}. Wrapper Div:hover{Opacity:. 5;-webkit-transform:Scale (1.5);-moz-transform:Scale (1.5) Transform:scale (1.5);}

Demo results

Note: The value of scale () defaults to 1, and the value is set to anything between 0.01 to 0.99 , which makes an element smaller, and any value greater than or equal to 1.01 is the function of making the element larger.

Warp-scaling scale ()