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

This article mainly explains "how to use the transform attribute of css3". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use the transform attribute of css3.

Transform is a new attribute of css3, which is used to change the shape of the element and realize the 2D or 3D conversion of the element. it can be used with the attribute value (conversion function) to rotate the element rotate, twist skew, scale scale, move translate and matrix deformation matrix.

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

Transform literally means deformation, and change means a new attribute of css3, which is used to set the shape change of the element and realize the 2D or 3D conversion of the element.

Transform in CSS3 mainly includes the following: rotating rotate, twisting skew, scaling scale and moving translate, and matrix deformation matrix.

Rotate rotation

The degree of rotation of the element by the specified angle is a positive clockwise rotation, a positive value indicates clockwise rotation, and a negative value indicates counterclockwise rotation.

Example:

Document body {background-color: # 000;} .box {width: 100px; height: 100px; border: 1px solid # fff; position: relative; top: 100px; left: 100px;} .box1 {width: 100px; height: 100px; background-color: red; transform:rotate (30deg);}

Effect:

Scale Zoom

There are three situations for scale:

Scale makes elements scale horizontally and vertically at the same time

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

ScaleY (y) element is scaled vertically only (Y-axis scaling)

.box {transfrom:scale (2)} .box {transfrom:scaleX (2)} .box {transfrom:scaleY (2)}

Effect picture:

Translate Mobility

There are three types of mobile translate:

Translate (XPerine y) moves horizontally and vertically (that is, the X and Y axes move at the same time)

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

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

Translate (XBI y)

.box {transfrom:translate (100pxjie 20px);}

Transform:translateX ()

.box {transform:translateX (100px);}

Transform:translateY ()

.box {transform:translateY (100px);}

Skew twist

Skew is also divided into three situations.

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

SkewX (x) distorts the element only horizontally (X-axis twist)

SkewY (y) distorts the element only in the vertical direction (Y-axis twist)

.box {transform:skew (20degjol 20deg);} .box {transform:skewX (20deg);} .box {transform:skewY (20deg);}

Transform-origin changes the element base point

Transform-origin (XQuery Y): used to set the base point (reference point) for the motion of an element. The default point is the central point of the element. The values of X and Y can be percentile, em, px, and X can also be character parameter values left, center, right;Y and X. in addition to percentile values, you can also set character values top, center, bottom

At this point, I believe you have a deeper understanding of "how to use the transform attribute of css3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.