<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .flip-container { perspective: 1000; } /* flip the pane when hovered */ /*.flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); }*/ .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 320px; height: 480px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; background: red; } /* back, initially hidden pane */ .back { transform: rotateY(180deg); background: cyan; } #myCard { padding-top:300px; } </style> </head> <body> <!-- <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> --> <div class="flip-container"> <div class="flipper"> <div class="front"> 前面内容 </div> <div class="back"> 背面内容 </div> </div> </div> <!-- /<div id="myCard" onclick="document.querySelector('.flip-container').classList.toggle('hover')">but</div> --> <div id="myCard">but</div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function(){ $('#myCard').click(function(){ $('.flip-container').toggleClass('hover') }) }) </script> </body> </html>
原文：http://www.jianshu.com/p/99aeb911f547；
https://segmentfault.com/a/1190000003903190