当需要做一个翻转卡片式的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: 0; 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);
完整代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>翻转div</title> 6 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 7 <style> 8 #main{ 9 position: absolute; 10 width: 200px; 11 height: 200px; 12 transform: translate(-50%,-50%); 13 } 14 #first{ 15 position: absolute; 16 width: 100%; 17 height: 100%; 18 background-color: #0a9404; 19 z-index: 1; 20 transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67); 21 } 22 #second{ 23 position: absolute; 24 width: 100%; 25 height: 100%; 26 background-color: #aa1111; 27 transform: rotateY(-180deg); 28 transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67); 29 } 30 #first.first-turn{ 31 z-index: 0; 32 transform: rotateY(-180deg); 33 } 34 #second.second-turn{ 35 transform: rotateY(0deg); 36 } 37 </style> 38 </head> 39 <body> 40 <div id="main"> 41 <div id="first"></div> 42 43 <div id="second"></div> 44 </div> 45 </body> 46 47 <script> 48 $("#first").click( 49 function(){ 50 $("#first").toggleClass("first-turn"); 51 $("#second").toggleClass("second-turn"); 52 } 53 ) 54 $("#second").click( 55 function(){ 56 $("#first").toggleClass("first-turn"); 57 $("#second").toggleClass("second-turn"); 58 } 59 ) 60 </script> 61 62 </html>