<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my</title> <style> #goAfter, #goBefore{ width: 20px; height: 20px; border-style: solid; padding: 10px 10px; background-color: #dbde1b; } .courseLogo{ width: 120px; height: 132px; float: left; margin-top: 1px; position: absolute; box-sizing: border-box; perspective: 800px; } .courseBefore{ width: 100%; height: 100%; position: absolute; background-color: pink; background-repeat: no-repeat; backface-visibility: hidden; transition: 1s; } .courseAfter{ width: 100%; height: 100%; position: absolute; background-color: dodgerblue; transform: rotateY(-180deg); backface-visibility: hidden; transition: 1s; } .courseLogo:hover .courseBefore{ transform: rotateY(180deg); } .courseLogo:hover .courseAfter{ transform: rotateY(0deg); } </style> <script> var angle1=0; var angle2=-180; var t =0; var tp = 0; var page=new Array("page1","page2","page3"); function ff(a) { if(a=="1"){ document.getElementById('id1').style.display='none'; document.getElementById('id2').style.display='inline'; }else{ document.getElementById('id1').style.display='inline'; document.getElementById('id2').style.display='none'; } } function goc(c) { if(c=="A"){ angle1+=180; angle2+=180; tp=(++tp)%3; t++; var k1='rotateY('+angle1+'deg)'; var k2='rotateY('+angle2+'deg)'; document.getElementById('courseBefore').style.transform= k1; document.getElementById('courseAfter').style.transform= k2; document.getElementById('a1').innerText=angle1; document.getElementById('a2').innerText=angle2; if(t%2==0){ document.getElementById('courseBefore').innerText=page[tp]; }else{ document.getElementById('courseAfter').innerText=page[tp]; } }else{ angle1-=180; angle2-=180; tp=(--tp+3)%3; t--; var k1='rotateY('+ angle1 +'deg)'; var k2='rotateY('+ angle2 +'deg)'; document.getElementById('courseBefore').style.transform= k1; document.getElementById('courseAfter').style.transform= k2; document.getElementById('a1').innerText=angle1; document.getElementById('a2').innerText=angle2; if(t%2==0){ document.getElementById('courseBefore').innerText=page[tp]; }else{ document.getElementById('courseAfter').innerText=page[tp]; } } } </script> </head> <body> <div id="goAfter" title="A" onclick="goc(this.title)">Left</div> <div id="goBefore"title="B" onclick="goc(this.title)">Right</div> <div> <p><b>angle1:</b><i id="a1">0</i></p> <p><b>angle2:</b><i id="a2">180</i></p> </div> <div class="courseLogo"> <div id="courseBefore" class="courseBefore">page1</div> <div id="courseAfter" class="courseAfter">page2</div> </div> </body> </html>文章来源: Web特效――简单卡片翻转效果