Home >Web Front-end >JS Tutorial >HTML, CSS, and jQuery: Build a beautiful card flip effect

HTML, CSS, and jQuery: Build a beautiful card flip effect

WBOYOriginal: 2023-10-27 13:43:45953browse

HTML, CSS and jQuery: Build a beautiful card flipping effect

In web design, the application of special effects can increase the interactivity and visual effects of the page. The card flipping effect is a common special effect that can bring users a more vivid and interesting browsing experience. This article will introduce how to use HTML, CSS and jQuery to build a beautiful card flip effect, and provide specific code examples.

First, we need to prepare the basic structure of HTML. We will use two div elements to represent the front and back of the card. The code is as follows:

<div class="card">
  <div class="front">
    <!-- 正面内容 -->
  </div>
  <div class="back">
    <!-- 反面内容 -->
  </div>
</div>

Next, we use CSS to define the style of the card. We can use the transform attribute to achieve a flip effect, and use the transition attribute to achieve a smooth transition animation. The code is as follows:

.card {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.front {
  background-color: #ffcc00;
}

.back {
  background-color: #ff3333;
  transform: rotateY(180deg);
}

In CSS, we set a perspective effect (perspective) for the .card element, which can make the flip effect more realistic. At the same time, we set the same width and height for the .front and .back elements, and use the backface-visibility attribute to hide the display of the back element to avoid flickering problems when flipped. We also set an initial rotation angle for the .back element, causing it to flip to its back.

Finally, we use jQuery to achieve the flipping effect of the card. We use the click event to trigger the flip effect, and use the toggleClass method to switch the class names of the front and back elements. The code is as follows:

$(document).ready(function() {
  $('.card').click(function() {
    $(this).toggleClass('flipped');
  });
});

In this code, we use the .ready() method to ensure that the document is loaded before performing subsequent operations. When the .card element is clicked, we switch the flipped class name through the toggleClass() method, thereby switching between the front and back elements.

In order to make the demonstration effect more obvious, we can add some text content and styles to the front and back elements. The complete HTML and CSS code is as follows:

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      position: relative;
      width: 200px;
      height: 200px;
      perspective: 1000px;
    }
    
    .front,
    .back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      transition: transform 0.6s;
    }
    
    .front {
      background-color: #ffcc00;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #ffffff;
    }
    
    .back {
      background-color: #ff3333;
      transform: rotateY(180deg);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #ffffff;
    }
    
    .flipped {
      transform: rotateY(180deg);
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.card').click(function() {
        $(this).toggleClass('flipped');
      });
    });
  </script>
</head>
<body>
  <div class="card">
    <div class="front">
      正面内容
    </div>
    <div class="back">
      反面内容
    </div>
  </div>
</body>
</html>

Save the above code as an HTML file, open it with a browser, and you will see a beautiful card flipping effect. When you click on the card, it flips smoothly to the back, and click again to flip back to the front.

Through the combination of HTML, CSS and jQuery, we can easily create various special effects to add attraction and interactivity to web pages. I hope the sample code in this article can help you build beautiful card flipping effects!

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful card flip effect. For more information, please follow other related articles on the PHP Chinese website!

jquery css html 事件 transform transition

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the Layui framework to develop a permission management system that supports multi-user loginNext article：How to use the Layui framework to develop a permission management system that supports multi-user login

See more

HTML, CSS, and jQuery: Build a beautiful card flip effect

Related articles