Article Directory
written in front
In fact, many of them are related to the company’s business. Some time ago, the leader asked to make a home page to display the card flip effect, but I was thinking about JS implementation. A sad phenomenon appeared later, that is, the code I wrote was encrypted. , it can’t be recovered, the key is that git has not submitted it, so I try to use another way to achieve the card flip effect. So on the eve of the weekend, I am going to organize an article about how to achieve 3D rotation effect with CSS3.
Knowledge points involved
How CSS3 realizes card flip effect, how CSS3 realizes 3D rotation effect, CSS realizes card dynamic effect, page realizes DOM flip effect, beautiful CSS style special effects.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
Show results
In fact, this is to allow more people to choose whether to continue reading this article, and to accurately locate the demo you want for everyone. There is a download link for the complete code package at the end of the article.
1. Construction of web pages
When making this page, the first thing is to conceive. The normal demo is to take a dom node as an example. I choose all 3, so it looks more comfortable.
1) Create a dom node
First create four dom nodes, using floating layout (float: left)
The HTML code is as follows:
<div class="hdddom">
<div class="hdd-3d">
</div>
<div class="hdd-3d">
</div>
<div class="hdd-3d">
</div>
<div class="hdd-3d">
</div>
</div>
The CSS code is as follows:
/* 原创于CSDN博主-拄杖盲学轻声码 */
body {
background-color: #EFEFEF;
}
.hdddom {
width: 1000px;
height: 600px;
overflow: hidden;
margin: 0 auto;
}
.hdd-3d {
width: 40%;
height: 200px;
margin-bottom: 30px;
margin-left: 20px;
float: left;
background-color: #fff;
}
2) Add pictures to DOM elements
The main thing is to add a figure tag in the div tag, then put the img in it, and set the style, as shown below:
3) Add flipped text
In fact, you only need to add a text label to the figure label in the second step just now. I added a figcaption label, and then you can focus on the adjustment effect.
Effect after adding:
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
2. Implementation of CSS effects
1) The div itself flips the effect
It mainly uses transform, which is a representative dynamic feature in CSS3. It can realize the rotation, tilt, displacement, and scaling of elements, and even supports the matrix method. With the transition and the animation knowledge to be learned, it can replace most of the previously used
flash The animation effect produced, of course, here I mainly use its translateY attribute first. It mainly implements the y-axis direction, and the added style is as follows:
.hdd-3d:hover figure {
transform: rotateY(.5turn);
}
The effect after adding the style is as follows:
2) 3D flip effect
This is mainly due to the setting of an attribute transform-style: preserve-3d;
and then adding a transition effect, the overall style is set as follows:
.hdd-3d figure {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: 1s transform;
font-size: 1.6rem;
margin: 0;
}
In addition, the style of the text after flipping should also be set as a dynamic flip:
.hdd-3d figure figcaption {
position: absolute;
width: 100%;
height: 80%;
top: 0;
transform: rotateY(.5turn) translateZ(1px);
background: rgba(255, 255, 255, 0.9);
text-align: center;
padding-top: 10%;
opacity: 0.6;
transition: 1s .5s opacity;
}
Complete CSS3 to achieve the flip effect demo code can leave a message in the mailbox or go to the Baidu network disk to download it yourself
3. Source code download area
1) Baidu Netdisk
Link: https://pan.baidu.com/s/1IbrCgyahJxUGoOtJd0Akvw
Extraction code: hdd6
2) 123 cloud disk
Link: https://www.123pan.com/s/ZxkUVv-9dI4.html
Extraction code: hdd6
3) Email message
Leave your email account in the comment area, and the blogger will send it to you as soon as he sees it
Salary increase support area
I hope that everyone can learn more through this article, and the salary will increase year by year!
If you like bloggers, you can go to the list to find out. Bloggers specially set up a salary increase list for everyone to check!
The handsome men and beauties who support the blogger can click here to view it.
Summarize
The above is what I want to talk about today. This article mainly introduces the application of CSS3 special effects. It mainly realizes 3D picture flip, 3D card flip, 3D text flip and other effects. I also look forward to everyone's progress together. Let's work together in 2023! ! !
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。