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

This article mainly introduces "how to use the 2D conversion module in HTML and CSS". In the daily operation, I believe many people have doubts about how to use the 2D conversion module in HTML and CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use the 2D conversion module in HTML and CSS". Next, please follow the editor to study!

I. 2D conversion module

2D conversion module

/ * where deg is the unit, how many degrees does it represent * /

Transform:rotate (45deg); / *

First parameter: horizontal direction

Second parameter: vertical direction

* / transform:translate (100pxre0px); / *

First parameter: horizontal direction

Second parameter: vertical direction

Note:

If the value is 1, it means no change.

If the value is greater than 1, it means you need to zoom in.

If the value is less than 1, it means that it needs to be reduced.

If the horizontal and vertical scaling are the same, it can be abbreviated to a parameter

* / / * transform:scale (0.5); * / transform:scale (1.5); / *

Note:

1. If multiple conversions are required, separate them with spaces

2. The 2D conversion module will change the coordinate system of the element, so the translation after rotation is not horizontal translation.

* / transform:rotate (45deg) translate (100pxmem0px)

2D conversion module

1.png

II. 2D conversion module-deformation center point

By default, all elements rotate with their own center point as a reference, and we can modify its reference point by deforming the center point attribute.

/ *

First parameter: horizontal direction

Second parameter: vertical direction

Pay attention

There are three forms of value.

Specific pixel

Percentage

Special keyword

* /

/ * transform-origin:200px0px;*/

/ * transform-origin:50%50%;*/

/ * transform-origin:0%0%;*/

/ * transform-origin:centercenter;*/

Transform-origin:lefttop

2.png

three。 Perspective property (perspective:500px;) and rotation axis (transform:rotateY (45deg);)

1.perspective:500px

1.1 what is perspective

Near big and far small

1.2. Pay attention

It is important to note that the perspective attribute must be added to the parent element of the element that needs to render near-large and small effects.

2.transform:rotateY (45deg)

Which axis you want to rotate around, you only need to add which axis after the rotate.

Code example:

95-2D conversion module-rotate axis

* {margin:0;padding:0;}

Ul {width:800px;height:500px;margin:0auto;}

Ulli {list-style:none;width:200px;height:200px;margin:0auto;margin-top:50px;border:1pxsolid#000

/ * 1. What is perspective, big and small?

two。 It is important to note that the perspective attribute must be added to the parent element of the element that needs to render near and far effects * /

Perspective:500px;} ulliimg {width:200px;height:200px

/ * perspective:500px;*/

} ulli:nth-child (1) {

/ * all elements are rotated around the Z axis by default * /

Transform:rotateZ (45deg);} ulli:nth-child (2) img {transform:rotateX (45deg);} ulli:nth-child (3) img {/ * Summary: if you want to rotate around which axis, you only need to add which axis after the rotate * / transform:rotateY (45deg);}! [] (images/rotateZ.jpg)! [] (images/rotateX.jpg)! [] (images/rotateY.jpg)

3.png

four。 Poker practice

96-2D conversion Module-activity

* {margin:0;padding:0;}

P {width:310px;height:438px;border:1pxsolid#000

Background-color:skyblue;margin:100pxauto;perspective:500px;}

Pimg {transform-origin:centerbottom;transition:transform1s;}

P:hoverimg {transform:rotateX (80deg);}

!] (images/pk.png)

4.gif

five。 Photo wall

97-2D conversion module-photo wall

* {margin:0;padding:0;}

Ul {height:400px;border:1pxsolid#000

Background-color:skyblue;margin-top:100px

Text-align:center;}

Ulli {list-style:none

Width:150px;height:200px

Background-color:red;display:inline-block

/ / converted to inline block-level elements for horizontal typesetting

Margin-top:100px;transition:all1s

Position:relative;box-shadow:0010px;}

Ulli:nth-child (1) {transform:rotate (30deg);}

Ulli:nth-child (2) {transform:rotate (- 40deg);}

Ulli:nth-child (3) {transform:rotate (10deg);}

Ulli:nth-child (4) {transform:rotate (45deg);}

Ulliimg {width:150px;height:200px

Border:5pxsolid#fff;box-sizing:border-box

}

Ulli:hover {/ * transform:rotate (0deg); * /

/ * transform:none;*/transform:scale (1.5)

/ / the previous rotation is overlaid and only zooms in

Z-index:998

/ / display at the top

}

!] (images/1.jpg)

!] (images/2.jpg)

!] (images/3.jpg)

!] (images/4.jpg)

At this point, the study on "how to use the 2D conversion module in HTML and CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.