Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the CSS3 deformation technologies?". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS3 deformation refers to the use of transform attributes for element rotation, distortion, scaling, displacement, matrix, origin and other types of deformation processing; element deformation operation needs to use rotate (), skew (), scale (), translate (), matrix () and other functions to achieve.

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

What is css3 deformation?

In CSS3, you can use transform function to achieve text or image rotation, distortion, scaling, displacement, matrix, origin of these six types of deformation processing, the following will explain the use of transform in detail.

Morph-rotate rotate ()

Div.box {transform: rotate (45deg);} / * rotate 45 degrees clockwise * /

Morph-Twist skew ()

Div.box {transform:skew (45deg);} / * turns a rectangle into a parallelogram through the skew () function. , /

Skew () has three situations:

1. Skew makes elements twist both horizontally and vertically (X and Y axes are distorted at a certain angle at the same time)

2. SkewX (x) only distorts the element in the horizontal direction (X-axis distortion)

3. SkewY (y) distorts the element only in the vertical direction (Y-axis distortion)

Morph-scale scale ()

Div.box {transform: scale (1.5pm 0.5);}

There are three situations for scaling scale:

1. Scale (XQuery Y) scales elements horizontally and vertically (that is, the X and Y axes are scaled at the same time).

2. The scaleX (x) element is scaled horizontally only (X-axis scaling)

3. The scaleY (y) element is scaled vertically only (Y-axis scaling)

The default value of scale () is 1, which, when set to any value between 0.01and 0.99, shrinks an element, while anything greater than or equal to 1.01 zooms in.

Deformation-displacement translate ()

Div.box {transform: translate (50pxMagne 100px);} / * move the element down the Y axis through the translate () function and move the 100px to the right of the X axis. , /

Translate we are divided into three situations:

1. Translate (XBY) move both horizontally and vertically (that is, the X axis and Y axis move at the same time)

2. TranslateX (x) moves horizontally only (X axis moves)

3. TranslateY (Y) moves vertically only (Y axis moves)

Deformation-Matrix matrix ()

Div.box {transform: matrix (1memo 0penny 1100100) } / * matrix () six attributes mean: the first width ratio 1 is the original size, the second is up and down tilt 1 is 2 times, 2 is 3 times, 0 is not tilted, the third is left and right tilt, the number is the same meaning as the second, the fourth is height ratio 1 is the original size, the fifth is the pixel displacement in X direction, the X direction is left and right, and the sixth is pixel displacement in Y direction. The X direction is up and down * /

Deformation-Origin transform-origin

Div.box {transform-origin: left top;transform: rotate (45deg);}

Change the origin of the element to the upper-left corner, and then rotate 45 degrees in time.

This is the end of the content of "what are the CSS3 deformation techniques"? thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.