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

This article mainly shows you "how to use 2d conversion in Css". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to use 2d conversion in Css".

The 2d transformation of css is very powerful, which can realize more dynamic interaction between the elements of the page and the user without using js, and enhance the user experience. One of the most commonly used is the hover pseudo-class.

1. Create the div element of a page:

2d conversion test Spring Festival Gala

4. Add a mouse click to the first square

.de:first-child:hover {transform: translate (0pxmam talk 5px); transition: transform 1s;}

After the mouse moves to the square area, the small square will move 5px upward, which has a transitional effect; after leaving the small square, immediately return to the original position, there is no transition effect

Another way to write it:

. de:first-child {transition: transform 1s;}. De:first-child:hover {transform: translate (0px Magazine 5px);}

Write the transition transition effect in the entire selected element, the effect that appears

After the mouse moves to the square area, the small square will move 5px upward, which has a transitional effect; after leaving the small square, the small square will go to the original position and have a transitional effect.

Principle: write the transition effect transition in the hover pseudo-class, when the mouse enters, the hover effect will apply the transition effect; when the mouse is removed, it belongs to non-hover, and there is no transition effect; that is, in the process of element movement, there is a transition effect; the element returns to its original position and has no transition effect. Writing transition transitions in the entire element will have a transitional effect during the entire movement of the element.

5. Add a complete animated css to each square:

# fr {width: 500px; height: 600px; border:1px solid gray; margin: 20px auto;} .de {width:100px; height:100px; border:1px solid green; margin: 10px auto;}. De:first-child {transition: transform 1s;} .de:first-child:hover {transform: translate (0px transform 5px);} .de:nth-child (2) {transition: transform 1s;} .de:nth-child (2): hover {transform: rotate (360deg) }. De:nth-child (3) {transition: transform 1s;}. De:nth-child (3): hover {transform: skew (30deg, 30deg);}. De:last-child {transition: transform 1s;}. De:last-child:hover {transform: scale (1.05);}

The above is all the content of the article "how to use 2d conversion in Css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.