CSS3-3D flip, css3 flip

Source: Internet
Author: User

CSS3-3D flip, css3 flip

In this case, we mainly use css3 and html5, and do not use JavaScript to do animation ghost. Ghost.

I. First, let's take a look at the main styles:

Perspective

Transform

Transition

Position

ClassList

So much, I will not elaborate on the limited level!

Ii. view results: demonstration results, runjs

The default three effect styles are shown in figure



 

It looks messy. Let's take a look at the demo. If you don't show the image =, the demo effect is runjs.

 

Iii. html structure:

3 containers and 6 boxes. When the mouse goes over:

1. Rotate box1 around the X axis (transform-origin default container Center), flip 180 ° to box2 on the back, move the mouse away and flip back

2. Rotate box3 around the Y axis (transform-origin default container Center), flip 180 ° to the back box4, move the mouse away and flip back

3. box5 and box6 rotate around the Z axis (transform-origin is about the container respectively), flip 180 °, move the mouse away and flip back

<body>    <div class="container" ontouchstart="this.classList.toggle('hover');">        <div class="box1">            <span>hello~</span>        </div>        <div class="box2">            <span>bye~</span>        </div>    </div>    <div class="container" ontouchstart="this.classList.toggle('hover');">        <div class="box3">            <span>hello~</span>        </div>        <div class="box4">            <span>bye~</span>        </div>    </div>    <div class="container" ontouchstart="this.classList.toggle('hover');">        <div class="box5">            <span>bye~</span>        </div>        <div class="box6">            <span>hello~</span>        </div>    </div></body>

 

4. The following is a style:

1. The perspective sub-element box added to the container has a perspective effect.

2. Because box2 and box4 are on the back, first flip-180 °. This way, when you flip to the back and then flip back, it will conform to normal vision.

3. backface-visibility is added to each box to hide the back of the rotated div element.

4. Changed the rotation center point in box5 and box6.

<style>    .container {        perspective: 400px;        transform-style: preserve-3d;        position: relative;    }    .container, .box1, .box2, .box3, .box4, .box5, .box6 {        width: 260px;        height: 160px;    }    .box1, .box2, .box3, .box4, .box5, .box6 {        backface-visibility: hidden;        transition: 1s;        transform-style: preserve-3d;        position: absolute;        top: 0;        left: 300px;        text-align: center;    }    .box1 {        background-color:pink;    }    .box2 {        background-color:red;        transform: rotateX(-180deg);    }    .box3 {        background-color:red;    }    .box4 {        background-color:pink;        transform: rotateY(-180deg);    }    .box5 {        background-color:red;        transform-origin:left;    }    .box6 {        background-color:pink;        transform-origin:right;    }    span{        font-size: 20px;        line-height: 160px;    }    .container:hover .box1 {transform: rotateX(180deg);}    .container:hover .box2 {transform: rotateX(0deg);}    .container:hover .box3 {transform: rotateY(180deg);}    .container:hover .box4 {transform: rotateY(0deg);}    .container:hover .box5 {transform: rotateZ(180deg);}    .container:hover .box6 {transform: rotateZ(-180deg);}    </style>

Isn't it easy? Let's go over it ~

V. Conclusion

I hope this will be helpful to you. Please correct the error. The article will be changed or updated from time to time. Please indicate the source for reprinting to facilitate tracing.

Related Article

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.