Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "in css3 can achieve zooming effect of the attribute is", detailed content, clear steps, details handled properly, I hope that this "in css3 can achieve zooming effect of the attribute is which" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge bar.

It is the transform property that can achieve scaling in css3. Transform attribute and scaleX () function can achieve horizontal scaling effect, and scaleY () function can achieve vertical scaling effect, and "scale (xrecoery)" function can achieve horizontal and vertical scaling at the same time.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

It is the transform property that can achieve scaling in css3.

The transform attribute is applied to the 2D or 3D transformation of an element. This property allows you to rotate, scale, move, tilt, and so on.

The transform attribute, in conjunction with the scaling method, scales the element according to the central origin.

There are three cases of css3 scaling:

(1) scaleX (x): elements are scaled horizontally only (X-axis scaling)

(2) scaleY (y): elements are scaled vertically only (Y-axis scaling)

(3) scale (xQuery): elements are scaled horizontally and vertically (X and Y axes are scaled simultaneously)

1. ScaleX (x)

Syntax:

Transform:scaleX (x)

Description:

X represents the multiple by which the element is scaled horizontally (the X axis). If it is greater than 1, it is zoomed in; if it is less than 1, it is zoomed out.

It is easy to understand when you think about the concept of multiples.

2. ScaleY (y)

Syntax:

Transform:scaleY (y)

Description:

Y represents the multiple by which the element is scaled vertically (the Y axis). If it is greater than 1, it is zoomed in; if it is less than 1, it is zoomed out.

3. Scale (XBI y)

Syntax:

Transform:scale (XBI y)

Description:

X represents the multiple of scaling of the element in the horizontal direction (X axis), and y represents the multiple of scaling of the element in the vertical direction (Y axis).

Note that Y is an optional parameter, and if the Y value is not set, it means that the magnification in both X and Y directions is the same (and magnify the same multiple at the same time).

For example:

CSS3 scaling scale () usage *, *: after, *: before {box-sizing: border-box } body {background: # F5F3F4; margin: 0; padding: 10px; font-family: 'Open Sans', sans-serif Text-align: center;} H2 {color: # 4c4c4c; font-weight: 600; border-bottom: 1px solid # ccc } h3, h5 {font-weight: 400; color: # 4d4d4d } .card {display: inline-block; margin: 10px; background: # fff; padding: 15px Min-width: 200px; box-shadow: 0 3px 5px # ddd; color: # 555;} .card .box {width: 100px Height: 100px; margin: auto; background: # ddd; cursor: pointer; box-shadow: 00 5px # ccc inset } .card .box .fill {width: 100px; height: 100px; position: relative; background: # 03A9F4 Opacity: .5; box-shadow: 00 5px # ccc;-webkit-transition: 0.3s; transition: 0.3s } .card p {margin: 25px 00;} .scale: hover .fill {- webkit-transform: scale (2,2) Transform: scale (2,2);} .scaleX: hover .fill {- webkit-transform: scaleX (2); transform: scaleX (2) } .scaley: hover .fill {- webkit-transform: scaleY (2); transform: scaleY (2);}

Scale (2)

ScaleX (2)

ScaleY (2)

After reading this, the article "which attributes can achieve zooming effect in css3" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about the article, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.