1. Case effect display
2. Build a basic html structure and center the pictures that need to be used
The structure of html is very simple, just put two photos in a box
html code:
<div class="img_box">
<img src="./img/1.png" id="img1">
<img src="./img/2.png" id="img2">
</div>css code:
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #01C4DA;
}3. First of all, if we want to flip the two pictures, we should open the positioning for them, so that they will be covered together
.img_box {
width: 400px;
height: 500px;
padding-top: 140px;
position: relative;
}
img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0);
}Here, remember that when you enable absolute positioning, you must enable relative positioning for the parent box, otherwise the picture will be positioned with the body as the parent box
4. The main idea of image flipping
We can flip the style through the transform css property
1. We need to flip the first picture to show the second picture, so we need to flip the picture 180°
We can perform a flip process on a certain picture
#img2 {
transform: rotateY(180deg);
}Note here that after adding the attribute, the picture is flipped, but the first picture is not displayed. At this time, we can add an attribute to control it. Its main function is to hide it when the picture is processed on the back
backface-visibility: hidden;2. Then you can add a hover event to the body to switch pictures
Note here that when the mouse enters, the picture on the back should be flipped back, and the other picture should be reversed, so that it can look more coherent
body:hover #img2 {
transform: rotateY(0deg);
}
body:hover #img1 {
transform: rotateY(-180deg);
}3. Then add an excessive time to the picture
transition: 2s all;Our basic flipping function has been realized, but the flipping of the picture looks very blunt and not beautiful enough, so at this time we can perform 3D processing on the picture to make it look more three-dimensional
5.3D effect realization
We mainly use two attributes here, one is to open the three-dimensional space, and the other is to cooperate with this attribute to achieve a realistic three-dimensional effect
transform-style: preserve-3d;
/* 开启三维空间 */
perspective: 1000px;
/* 可以改变元素在视觉上的尺寸和位置，从而创建出更加逼真的3D效果 */The main function of perspective is to simulate the distance between your eyes and the picture. The smaller the value, the stronger the perspective effect, and the object size will appear larger; the larger the value, the weaker the perspective effect, and the object size will appear smaller.
1000px is a value that I tested and looked more beautiful. You can also try to set some smaller values, which can open the door to a new world.
6. Complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #01C4DA;
perspective: 1000px;
/* 可以改变元素在视觉上的尺寸和位置，从而创建出更加逼真的3D效果 */
}
.img_box {
width: 400px;
height: 500px;
padding-top: 140px;
position: relative;
transform-style: preserve-3d;
/* 开启三维空间 */
}
img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0);
backface-visibility: hidden;
/* 该句代码的意思就是当你是背面面向的时候，就会隐藏图片，我们设置的180°旋转就是让他隐藏了 */
transition: 2s all;
}
#img2 {
transform: rotateY(180deg);
}
body:hover #img2 {
transform: rotateY(0deg);
}
body:hover #img1 {
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<div class="img_box">
<img src="./img/1.png" id="img1">
<img src="./img/2.png" id="img2">
</div>
</body>
</html>over