Methods and examples of using CSS to achieve card flip effects

Methods and examples of using CSS to achieve card flipping effects

In modern web design, the flipping effect is a common and cool special effect that can add color to the web page. Add a sense of movement and interactivity. Using CSS transformation properties and animation properties, we can easily achieve the card flipping effect. This article will introduce a basic card flip effect and provide specific code examples for readers' reference.

The card flip effect refers to the animation effect of flipping the card from front to back, or from back to front. In order to achieve this effect, we need to use CSS transformation properties and animation properties. The specific steps are as follows:

1. Define an HTML element with a "card" style. This element can be a div that has a front and a back. We can use CSS pseudo-class selectors, such as :hover or :focus, to set the flip effect to be triggered when the mouse is hovered or clicked.

<div class="card">
  <div class="front">
    <h2>正面</h2>
  </div>
  <div class="back">
    <h2>背面</h2>
  </div>
</div>

2. Use the CSS transform property to rotate the back 180 degrees and hide it. We can use transform: rotateY() to achieve this effect. In addition, we can also use the CSS transition attribute to smoothly transition the flip effect.

.card {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px; /*设置视角*/
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /*将背面隐藏*/
}

.back {
  transform: rotateY(180deg); /*将背面旋转180度*/
}

.card:hover .front, .card:focus .front {
  transform: rotateY(180deg); /*鼠标悬浮或点击时将正面旋转180度*/
}

.card:hover .back, .card:focus .back {
  transform: rotateY(0deg); /*鼠标悬浮或点击时将背面旋转至初始状态*/
}

In the above code, we set the perspective attribute in the .card element, which defines the distance between the observer and the two-dimensional conversion element, producing a three-dimensional effect. By setting the rotateY attribute of the .back element and the transform attribute of the .front element, we define the rotation status of the back and front of the card respectively. Through the :hover or :focus pseudo-class selectors, we define the states that trigger the flip effect when the mouse is hovering and clicking respectively. At the same time, through the transition attribute transition, we achieve a smooth transition animation effect.

The above are the basic methods and examples of using CSS to achieve the card flip effect. By taking advantage of the rich features in CSS, we can customize more flip effects with rich styles. Readers can further expand and optimize this effect according to their own needs and creativity to achieve a more attractive page interaction effect.

The above is the detailed content of Methods and examples of using CSS to achieve card flip effects. For more information, please follow other related articles on the PHP Chinese website!