Home > Developer > JavaScript
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.
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
