Home > Developer > Web Develop
The 2d conversion of CSS is very powerful, it 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 used is the hover pseudo-class.
1. Create a DIV element for a page:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title>2d Conversion Test</title> </Head> <Body> <DivID= "FR"> <Divclass= "de">I am the Test text</Div> <Divclass= "de">I am the Test text</Div> <Divclass= "de">I am the Test text</Div> <Divclass= "de">I am the Test text</Div> </Div> </Body></HTML>
2. The style of the given element in CSS:
#fr { width: 500px; height: 600px; Border: 1px solid Gray; margin: 20px auto; }
. de { width:100px; height:100px; Border:1px solid Green; margin: 10px auto; }3, the effect of browser parsing:
4, give the first square to add the effect of the mouse click CSS:
. De:first-child:hover { transform: translate (0px,-5px);
transition: transform 1s; }Effect:
The mouse moves to the square area, the small square will move upward 5px, has the transition effect, after leaving the small square, immediately returns to the position, does not have the transition effect;
Another way to do this:
. De:first-child { transition: transform 1s; } . de:first-child:hover{ transform: translate (0px,-5px); }Writes the transition transition effect to the entire selected element, with the effect of:
The mouse moves to the square area, the small square will move upward 5px, has the transition effect, after leaving the small square, the small square will go to the original position, has the transition effect.
principle : The Transition effect transition written in the hover pseudo-class, when the mouse enters, the hover effect will be applied transition effect, mouse out, belongs to non-hover, no transition effect; that is, there is a transition effect during element movement The element returns to its original position without a transition effect. The transition transitions are written throughout the element, and transitions are played during the entire movement of the element.
5. Add the full CSS to each small 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,-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,1.05); }
Effect:
All transform transition need a browser compatibility adaptation , just for demonstration purposes and no browser adaptation.
2d transformations in CSS: transition transitions in: hover pseudo-class differs from application across the entire element
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
