如何在 HTML 中翻转卡片

Question

我是网络开发的新手，遇到了这个问题。为此，我创建了一个 Codepen

我想为这 6 张卡片添加一张图片。当我将鼠标悬停在图像上时，它应该交换卡片并显示内容。因此，当前三张卡片交换时，它仍然显示图像而不是前三张卡片下方的内容。

所以我的想法是：当我将鼠标悬停在图像上时，它应该交换卡片并仅显示白色背景，内容作为下面三张卡片。

任何人都可以在这里帮助我如何做吗？

    .services .icon-box {
      text-align: center;
      border: 1px solid #e2eefd;
      padding: 80px 20px;
      transition: all ease-in-out 0.3s;
    }
    
    .services .icon-box .icon {
      margin: 0 auto;
      width: 64px;
      height: 64px;
      background: #f1f6fe;
      border-radius: 4px;
      border: 1px solid #deebfd;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      transition: ease-in-out 0.3s;
    }
    
    .services .icon-box .icon i {
      color: #3b8af2;
      font-size: 28px;
      transition: ease-in-out 0.3s;
    }
    
    .services .icon-box h4 {
      font-weight: 700;
      margin-bottom: 15px;
      font-size: 24px;
    }
    
    .services .icon-box h4 a {
      color: #222222;
      transition: ease-in-out 0.3s;
    }
    
    .services .icon-box p {
      line-height: 24px;
      font-size: 14px;
      margin-bottom: 0;
      margin-top: 0;
    }
    
    .services .icon-box:hover {
      border-color: #fff;
      box-shadow: 0px 0 25px 0 rgba(16, 110, 234, 0.1);
    }
    
    .services .icon-box:hover h4 a, .services .icon-box:hover .icon i {
      color: #106eea;
    }
    
    .services .icon-box:hover .icon {
      border-color: #106eea;
    }
    
    .flip-card {
      background-color: transparent;
     
      height: 337px;
    }
    
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }
    .align-items-stretch:hover .flip-card-front {
        display: none;
    }
    .flip-card-inner{
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      background-size: cover;
      background-repeat: no-repeat;
    
    }
    
    .flip-card-front, .flip-card-back {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    .flip-card-back {
      color: black;
      transform: rotateY(180deg);
    
    }
    
    .flip-card:last-child {
      margin-bottom: 0;
    }

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    
    <section id="services" class="services">
          <div class="container" data-aos="fade-up">
    
            <div class="section-title">
              <h2>Lorem</h2>
              <h3>Lorem <span>.</span></h3>
              <p>Praesent in dui nec lorem vulputate hendrerit quis vel nisl. Aenean at auctor augue. Vivamus facilisis pretium suscipit. Praesent nec turpis pellentesque elit iaculis tristique et at justo. Pellentesque feugiat, leo nec rutrum aliquam, dui est pulvinar diam, ut elementum velit nibh vitae ipsum. Morbi id lacinia risus. Etiam faucibus erat ac nibh aliquet laoreet. Sed velit ante, auctor sed imperdiet id, elementum a justo. Nullam condimentum metus vitae porttitor tincidunt.</p>
            </div>
    
            <div class="row">
              <div class="col-lg-4 col-md-6 d-flex align-items-stretch flip-card" data-aos="zoom-in" data-aos-delay="100">
                <div class="icon-box flip-card-inner" style="background-image: url('https://images.unsplash.com/photo-1611095790444-1dfa35e37b52?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80');">
                  <div class="flip-card-front">
                    <div class="icon"><i class="bx bxs-user-account"></i></div>
                    <h4><a href="" style="color: white;">Lorem</a></h4>
                  </div>
                  <div class="flip-card-back">
                    <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
                  </div>   
                </div>
              </div>
    
              <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0 flip-card" data-aos="zoom-in" data-aos-delay="100">
                <div class="icon-box flip-card-inner" style="background-image: url('https://images.unsplash.com/photo-1560732488-6b0df240254a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');">
                  <div class="flip-card-front">
                    <div class="icon"><i class="bx bx-server"></i></div>
                    <h4><a href="" style="color: white;">Lorem</a></h4>
                  </div>
                  <div class="flip-card-back">
                    <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
                  </div>   
                </div>
              </div>
    
              <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0 flip-card" data-aos="zoom-in" data-aos-delay="100">
                <div class="icon-box flip-card-inner" style="background-image: url('https://images.unsplash.com/photo-1454779132693-e5cd0a216ed3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80');">
                  <div class="flip-card-front">
                    <div class="icon"><i class="bx bx-network-chart"></i></div>
                    <h4><a href="" style="color: white;">Lorem</a></h4>
                  </div>
                  <div class="flip-card-back">
                    <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum..</p>
                  </div>   
                </div>
              </div>
    
              <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 flip-card" data-aos="zoom-in" data-aos-delay="100">
                <div class="icon-box flip-card-inner" style="text-align: center;">
                  <div class="flip-card-front">
                    <div class="icon"><i class="bx bx-world"></i></div>
                    <h4><a href="">Lorem</a></h4>
                  </div>
                  <div class="flip-card-back">
                    <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
                  </div>   
                </div>
              </div>
    
              <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 flip-card" data-aos="zoom-in" data-aos-delay="100">
                <div class="icon-box flip-card-inner" style="text-align: center;">
                  <div class="flip-card-front">
                    <div class="icon"><i class="bx bx-star"></i></div>
                    <h4><a href="">Lorem</a></h4>
                  </div>
                  <div class="flip-card-back">
                    <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
                  </div>   
                </div>
              </div>
    
              <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 flip-card" data-aos="zoom-in" data-aos-delay="100">
                <div class="icon-box flip-card-inner" style="text-align: center;">
                  <div class="flip-card-front">
                    <div class="icon"><i class="bx bx-coin-stack"></i></div>
                    <h4><a href="">Lorem</a></h4>
                  </div>
                  <div class="flip-card-back">
                    <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices, tellus in ullamcorper sodales, felis dui condimentum dolor, quis feugiat nunc mi nec turpis. Proin convallis ultrices quam et condimentum.</p>
                  </div>   
                </div>
              </div>
    
            </div>
    
          </div>
        </section>

非常感谢！

Answer 1

显示名片背面时需要隐藏图片。给定代码的最简单方法是将背景大小设置为 0。

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  background-size: 0; /* Added to hide the background image. */
}

如何在 HTML 中翻转卡片

How to flip card in HTML

html

css

visual-web-developer

web

bootstrap-5