首页做一个可翻转的人物卡片的代码

做一个可翻转的人物卡片的代码

时间: 2024-10-20 21:08:41 浏览: 22

制作一个可翻转的人物卡片通常涉及到JavaScript和CSS的交互，这里是一个简单的HTML、CSS和JavaScript示例，使用CSS3的`transform`和`transition`属性实现翻转效果： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <style> .flip-card { width: 200px; height: 200px; perspective: 1000px; /* 设置透视效果 */ } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; } .flip-card-front, .flip-card-back { position: absolute; backface-visibility: hidden; /* 隐藏翻转面 */ width: 100%; height: 100%; } .flip-card-front { background-color: #fff; color: black; z-index: 2; } .flip-card-back { background-color: #f00; color: white; transform: rotateY(180deg); } </style> </head> <body> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front">正面人物信息</div> <div class="flip-card-back">背面人物信息</div> </div> <button onclick="toggleFlip()">点击翻转</button> </div> <script> function toggleFlip() { var card = document.querySelector('.flip-card'); if (card.classList.contains('flipped')) { card.style.transform = 'rotateY(0)'; card.classList.remove('flipped'); } else { card.style.transform = 'rotateY(180deg)'; card.classList.add('flipped'); } } </script> </body> </html> ``` 这个代码中，当你点击“点击翻转”按钮时，人物卡片会从正面翻转到背面，反之亦然。`flipped`类用于控制翻转状态的切换。

阅读全文