2d transformations in CSS: transition transitions in: hover pseudo-class differs from application across the entire element

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.