<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .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; } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } </style> </head> <body> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- 前面内容 --> <img src="http://pic0.xihuan.me/edr/680__/t021499be002a3f0cf1.jpg" height="700" alt=""> </div> <div class="back"> <img src="http://pic2.xihuan.me/edr/680__/t029373f8f522a8bc97.jpg" height="700" alt=""> <!-- 背面内容 --> </div> </div> </div> </body> </html>
Document
