<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css flip</title> <style type="text/css"> /* entire container, keeps perspective */ .flip-container { perspective: 1000; transform-style: preserve-3d; } /* UPDATED! flip the pane when hovered */ .flip-container:hover .back { transform: rotateY(0deg); } .flip-container:hover .front { transform: rotateY(180deg); } .flip-container, .front, .back { width: 320px; height: 200px; } /* 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; transition: 0.6s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } /* UPDATED! front pane, placed above back */ .front { z-index: 2; transform: rotateY(0deg); background:yellow; } /* back, initially hidden pane */ .back { transform: rotateY(-180deg); background:red; } /* Some vertical flip updates */ .vertical.flip-container { position: relative; } .vertical .back { transform: rotateX(180deg); } .vertical.flip-container:hover .back { transform: rotateX(0deg); } .vertical.flip-container:hover .front { transform: rotateX(180deg); } </style> </head> <body> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <p> 前面内容，鼠标移到这，试试 </p> </div> <div class="back"> <table style="width:100%"> <tr> <td>用户名</td> <td><input type="text"/></td> </tr> <tr> <td>密码</td> <td><input type="text"/></td> </tr> </table> </div> </div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » css flip 翻转 喜欢 (0)or分享 (0)
