“PK creative Spring Festival, I am participating in the” Spring Festival Creative submission contest “, please see: Spring Festival Creative Submission Contest”
· Use CSS3 to make twelve-year-old Shawka card flip effect
1. Show the effect
2. Split the steps
2.1 Understand the flip effect
Flip effect, that is, like a playing card, has two sides. When the card is facing the front, the display is the count or king card, when facing the back, we can’t see the front of the card. Think of it in terms of a page, where two div containers are superimposed so that at some point one div is displayed and the other div is hidden.
2.2 Realize the flip effect
1. Create an overlay of two divs
To create an overlay of two divs, we need two position attributes: Relative and Absolute. We can create a parent div with two child divs nested inside and set the position attribute of the parent div to RELATIVE and the absolute attribute of the two child divs.
Why do I do this?
The relative property of the parent container is set to serve the child container with absolute property. The child container with absolute property is positioned according to the nearest parent container whose position property is not static. We can make the two child containers overlap.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="cardBox">
<div class="cardForeCover"></div>
<div class="cardBackCover"></div>
</div>
</body>
</html>
<style>
.cardBox {
width: 126px;
height: 224px;
position: relative;
}
.cardForeCover {
width: 100%;
height: 100%;
position: absolute;
background: #5758b2;
}
.cardBackCover {
width: 100%;
height: 100%;
position: absolute;
background: #ed4846;
}
</style>
Copy the code
We can debug to see that the two divs are superimposed and that the latter subdiv overrides the former.
2. Rotate using the transform property
We can use the rotateY property in the Transform property to set the rotation Angle of the two child divs around the Y-axis. Here we need to think about what the following picture is trying to convey.
Let’s say the red side is the back side and the purple side is the front side, so we want to rotate the red side from 0 degrees to 180 degrees about the Y-axis, and the purple side from -180 degrees to 0 degrees about the Y-axis. Here’s a puzzle: Why can’t the purple side rotate from 180 degrees to 0 degrees around the Y-axis?
The red side rotates from 0 degrees to 180 degrees around the Y-axis, and the red side rotates counterclockwise around the Y-axis. And if the purple side is going from 180 degrees to 0 degrees around the Y axis, it’s going to be rotating clockwise around the Y axis. And what we’re going to do is we’re going to rotate the red side and the purple side in the same direction, so we’re going to rotate the purple side from minus 180 degrees to 0 degrees about the Y axis, so we’re going to rotate it clockwise around the Y axis, so we’re not going to cross or overlap them.
So we specify the Angle that the child div initializes relative to the Y-axis, and we write a pseudo-class for the parent div that specifies the Angle that the child div changes relative to the Y-axis when the mouse moves over the parent div.
.cardForeCover {
width: 100%;
height: 100%;
position: absolute;
background: #cd4a40;
transform: rotateY(-180deg); /* Initializes the Angle of the positive child div relative to the Y-axis */
}
.cardBackCover {
width: 100%;
height: 100%;
position: absolute;
background: cadetblue;
transform: rotateY(0deg); /* Initializes the Angle of the back child div relative to the Y-axis */
}
.cardBox:hover .cardForeCover {
transform: rotateY(0deg); /* Specifies the Angle of the positive child div relative to the Y-axis Angle */ when the cursor is moved over the parent div
}
.cardBox:hover .cardBackCover {
transform: rotateY(180deg); /* Specifies the Angle of the child divs on the back with respect to the Y-axis */ when the cursor is moved over the parent div
}
Copy the code3. Use backface-visibility to hide the back of the child div that represents the back
At this point, let’s demonstrate what we’ve done so far:
We see that when we move the mouse over the parent div, there is no effect, and when we move the mouse over the parent div, there is no effect. What happens? In this case, we use the backface-visibility property, which indicates whether the back of an element is visible when it is rotated.
So, when the child div representing the front or the child div representing the back rotates along the Y axis at a certain Angle, we need to hide the back, so we need to add the following properties to the.cardForecover class and the.cardBackcover class immediately to do that.
backface-visibility: hidden; /* Sets div to hide its back */
Copy the codeHere’s another example of what we’ve done so far:
4. Add a transition effect to the div rotation
We can use Transition to add a transition effect to div rotation. Transition is a four-parameter acronym that describes, from left to right, the CSS property name of the transition effect to be set, the duration of the transition effect, the property name of the transition effect, and the delay time of the transition effect. So now we’re going to add the following properties to the.cardForecover class and the.cardBackcover class to do this transition.
transition: transform 0.5 s ease-in-out; /* Sets the transition effect applied when div is rotated */
Copy the codeAt this point, let’s see what the div looks like when rotated with a transition effect added:
5. Add perspective attributes to enhance 3D effects
Through the previous 4 steps we have basically completed the card flip effect, now there is a problem: we see the card flip effect is not very three-dimensional.
We can enhance the 3D effect by adding the Perspective property to increase the distance between the perspective point and the div as it rotates.
We will now implement this enhanced 3D effect by adding the following property to the.cardbox class, whose value is usually greater than or equal to the height of the parent div.
perspective: 224px;
Copy the codeLet’s show the final result:
3. Complete code
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>application</title>
</head>
<body>
<div class="flexBox">
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image1.png">
</div>
<div class="cardBackCover">
<div>The rat</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image2.png">
</div>
<div class="cardBackCover">
<div>The cow</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image3.png">
</div>
<div class="cardBackCover">
<div>The tiger</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image4.png">
</div>
<div class="cardBackCover">
<div>The rabbit</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image5.png">
</div>
<div class="cardBackCover">
<div>dragon</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image6.png">
</div>
<div class="cardBackCover">
<div>The snake</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image7.png">
</div>
<div class="cardBackCover">
<div>The horse</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image8.png">
</div>
<div class="cardBackCover">
<div>The sheep</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image9.png">
</div>
<div class="cardBackCover">
<div>The monkey</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image10.png">
</div>
<div class="cardBackCover">
<div>chicken</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image11.png">
</div>
<div class="cardBackCover">
<div>The dog</div>
</div>
</div>
<div class="cardBox">
<div class="cardForeCover">
<img src="image/image12.png">
</div>
<div class="cardBackCover">
<div>The pig</div>
</div>
</div>
</div>
</body>
</html>
<style>
html.body {
margin: 0px;
padding: 0px;
}
.flexBox {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
img {
width: 96px;
height: 96px;
}
.cardBox div {
/* Beautify the child div*/
border-radius: 5px;
color: whitesmoke;
font-size: 32px;
/* Set the Flex layout so that images and text are centered */
display: flex;
justify-content: center;
align-items: center;
}
.cardBox {
width: 126px;
height: 224px;
position: relative;
perspective: 224px;
margin: 20px;
}
.cardForeCover {
width: 100%;
height: 100%;
position: absolute;
background: #5758b2;
transform: rotateY(-180deg); /* Initializes the Angle of the positive child div relative to the Y-axis */
transition: transform 0.5 s ease-in-out; /* Sets the transition effect applied when div is rotated */
backface-visibility: hidden; /* Sets div to hide its back */
}
.cardBackCover {
width: 100%;
height: 100%;
position: absolute;
background: #ed4846;
transform: rotateY(0deg); /* Initializes the Angle of the back child div relative to the Y-axis */
transition: transform 0.5 s ease-in-out; /* Sets the transition effect applied when div is rotated */
backface-visibility: hidden; /* Sets div to hide its back */
}
.cardBox:hover .cardForeCover {
transform: rotateY(0deg); /* Specifies the Angle of the positive child div relative to the Y-axis Angle */ when the cursor is moved over the parent div
}
.cardBox:hover .cardBackCover {
transform: rotateY(180deg); /* Specifies the Angle of the child divs on the back with respect to the Y-axis */ when the cursor is moved over the parent div
}
</style>
Copy the codeAuthor: Toyo
Copyright notice: This article is an original article, shall not be reproduced without my permission.