当需要做一个翻转卡片式的div时候，需要两个div的大小等大例如：
画出两个等大的div后，将他们重叠
图中的两个div做了重叠，做重叠时候用的属性是
position: absolute;
并且需要将第一页的css里加上z-index 可以使的第一页在第二页上
main的css需要添加
transform: translate(-50%,-50%);
课使旋转中心在div的中点
再做完重叠后需要用
transform: rotateY(-180deg);
这条语句把第二个div事先令它翻转180度，为的是再翻转回来的时候是正常的
接下来定义再定义两个优先级最高的css样式 用于翻转操作
#first.first-turn{
z-index:;
transform: rotateY(-180deg);
}
#second.second-turn{
transform: rotateY(0deg);
}
翻转的过程中将第一个div的z-index改为0
最后定义用JQ定义两个点击事件
<script>
$("#first").click(
function(){
$("#first").toggleClass("first-turn");
$("#second").toggleClass("second-turn");
}
)
$("#second").click(
function(){
$("#first").toggleClass("first-turn");
$("#second").toggleClass("second-turn");
}
)
</script>
意思为，当点击时候增加一个css
如果要修改翻转速度可以在第一个div和第二个div的css里添加如下语句。调试可以通过谷歌浏览器
transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67);
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻转div</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
#main{
position: absolute;
width: 200px;
height: 200px;
transform: translate(-50%,-50%);
}
#first{
position: absolute;
width: 100%;
height: 100%;
background-color: #0a9404;
z-index: 1;
transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67);
}
#second{
position: absolute;
width: 100%;
height: 100%;
background-color: #aa1111;
transform: rotateY(-180deg);
transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67);
}
#first.first-turn{
z-index: 0;
transform: rotateY(-180deg);
}
#second.second-turn{
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div id="main">
<div id="first"></div> <div id="second"></div>
</div>
</body> <script>
$("#first").click(
function(){
$("#first").toggleClass("first-turn");
$("#second").toggleClass("second-turn");
}
)
$("#second").click(
function(){
$("#first").toggleClass("first-turn");
$("#second").toggleClass("second-turn");
}
)
</script> </html>