How to use css3 to achieve 3D flop effect (complete code attached)-CSS Tutorial-php.cn

How to use css3 to achieve 3D flop effect (complete code attached)

坏嘻嘻

Release： 2018-09-27 10:03:47

Original

3619 people have browsed it

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">
$(&#39;.div1&#39;).click(() => {
$(&#39;.div1&#39;).addClass(&#39;div2&#39;)
})
</script>

Copy after login

The effect is as shown in the picture

How to use css3 to achieve 3D flop effect (complete code attached) ##

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!