css 翻转特效

行业动态 公司新闻 案例分享 技术百科

css 翻转特效

来源:奇站网络 浏览量:248 发布日期: 2024-04-19

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <style>
  8. .flip-card {
  9. perspective: 1000px;
  10. /* 创建3D效果 */
  11. }
  12. .flip-card-inner {
  13. width: 200px;
  14. height: 200px;
  15. /* background-color: #f5f5f5; */
  16. transition: transform 0.6s;
  17. transform-style: preserve-3d;
  18. }
  19. .flip-card-front,
  20. .flip-card-back {
  21. backface-visibility: hidden;
  22. /* 隐藏翻转的背面 */
  23. position: absolute;
  24. width: 100%;
  25. height: 100%;
  26. transition: transform 1s;
  27. z-index: 99;
  28. }
  29. .flip-card-front {
  30. background-color: antiquewhite;
  31. }
  32. .flip-card-back {
  33. background-color: aquamarine;
  34. transform: rotateY(180deg);
  35. /* 初始状态下翻转背面 */
  36. }
  37. .flip .flip-card-front {
  38. transform: rotateY(-180deg);
  39. }
  40. .flip .flip-card-back {
  41. transform: rotateY(0);
  42. }
  43. </style>
  44. <body>
  45. <div class="flip-card">
  46. <div class="flip-card-inner">
  47. <div class="flip-card-front">
  48. 正面
  49. </div>
  50. <div class="flip-card-back">
  51. 背面
  52. </div>
  53. </div>
  54. </div>
  55. <button onclick="flipCard()">点击翻转卡片</button>
  56. </body>
  57. <script>
  58. function flipCard() {
  59. var card = document.querySelector('.flip-card');
  60. card.classList.toggle('flip');
  61. }
  62. </script>
  63. </html>
标签:

厦门奇站网络科技有限公司

电话:13313868605

QQ:3413772931

地址:厦门集美区软件园三期

网站地图


                    扫一扫加我咨询