Home > Article > Web Front-end > How to use css3 to achieve 3D flop effect (complete code attached)
How to use css3 to achieve 3D flop effect (complete code attached)
- 坏嘻嘻Original
- 2018-09-27 10:03:473620browse
Recently, I have been learning about CSS3, and I really feel that this is a very practical and cool technology. It can not only replace the patterns and shapes expressed in previous pictures, but also create some special effects. For example, shadow effects, gradient effects, etc., among which the 3D conversion effect is particularly cool. The content of this article is about how to use css3 to achieve 3D card flip effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The principle of using css3 to achieve 3D flip effect
The so-called flip effect is to flip the image along the y-axis. Effect.
First of all, we need to be clear that there are two divs of the same size originally set, not just one! Then we need to overlap the two divs and use the position:absolute statement to overlap the divs placed above and below.
Next we need to rotate the first div along the y-axis. Here we will use the transform:rotageY (-180deg) statement to achieve this. At the same time, we need to distinguish between the two divs and rotate one of them. At the same time as 180deg, the other one rotates 0deg.
Finally, when the div rotated 180deg completes the rotation, we hide it and use the backface-visibility: hidden; statement to realize the function of the image disappearing when it is moved to an invisible place on the display.
ps: If anyone is unclear about the above content, you can check the relevant articles on this site.
How to use css3 to create a circular rotation animation (complete code attached)
Code for using css3 to achieve a 3D flip effect
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PHP中文网</title>
<script src="http://7xiyzi.com2.z0.glb.qiniucdn.com/20160409_weixinjquery-2.1.0.min.js?i=6" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="div1">
<div class="div2">
<img src="http://static.wesai.com/files/upload/9/bd9/feeae/9bd9dfeeaee3b9be37a3ad4e75fe7004.jpg" alt="How to use css3 to achieve 3D flop effect (complete code attached)" >
</div>
</div>
</body>
</html>
<style>
.div1 {
width: 185px;
height: 251px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
}
.div1.div2 {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
backface-visibility：hidden;
}
img {
width: 185px;
height: 251px;
}
</style>
<script type="text/javascript">
$('.div1').click(() => {
$('.div1').addClass('div2')
})
</script>The effect is as shown in the picture
##
The above is the detailed content of How to use css3 to achieve 3D flop effect (complete code attached). For more information, please follow other related articles on the PHP Chinese website!