Css3图片翻转
<!DOCTYPE html> <html> <head> <title>Css3图片翻转</title> <meta charset="utf-8" /> <style> .flip-container { perspective: 1000; transform-style: preserve-3d; } .flip-container, .front, .back { width: 320px; height: 480px; } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; transition: 0.6s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .front { background:#0e1; z-index: 2; transform: rotateY(0deg); } .back { background:#ccc; transform: rotateY(-180deg); } .backs { transform: rotateY(0deg); } .fronts { transform: rotateY(180deg); } </style> </head> <body> <div class="flip-container"> <div class="flipper"> <div class="front" id="pid1"> <!-- 前 --> <img src="./1.jpg" style="width:100%;height:100%"/> </div> <div class="back" id="pid2"> <!-- 后 --> <img src="./2.jpg" style="width:100%;height:100%"/> </div> </div> </div> <button id="btn"> 按 钮 </button> <script> var _btn = document.getElementById("btn"); var _pid1 = document.getElementById("pid1"); var _pid2 = document.getElementById("pid2"); _btn.onclick = function(){ _pid1.className = "fronts front"; _pid2.className = "backs back"; } </script> </body> </html>
人如代码,规矩灵活;代码如诗,字句精伦。