This is the third day of my participation in Gwen Challenge

Implementation effect

When the mouse moves over the containing block, the element is flipped 180° to switch between the front and the back.

The content of

  1. So we need the outermost one firstcardTo wrap the entire flip area
  2. Then you need the front and back contents (here we are simply dealing with the background color of the front and back to distinguish)

Using the layout

The front and back sides need to overlap. It is easy to think that the outer card should be positioned relative to each other, and the inner card should be positioned absolute relative to the outer card to make it overlap. Then you need to set the reverse flip to 180°, and the flip to hide the back side needs to add backface-visibility:hidden.

Note: the absolute positioning element comes from behind, so the front needs to be placed after the back, or directly set the frontz-indexIs greater than the opposite

Achieve 3D effect

The flip effect is actually a 3D effect, so we need to use a transform-style property to make the child element look like the flip, and we also need to set the transition effect.

Transition requires a state called hover when the card flips and the card flips 180 degrees

added

If you want to do a vertical flip you change rotateY to rotateX

If you want to trigger a rollover by clicking on the event, add a class that removes card to the click event

The key summary

  • Animation Effects: Addtransitionexcessive
  • Positive and negative overlap: the outermost layer is positioned relatively, the internal positive and negative sides are positioned absolutely, and the reverse side is flipped 180° first
  • Hide back: Add front and backbackface-visibility:hidden
  • hoverFlip: a cardhoverTurn over 180 °
  • 3D effect: Add cardstransform-styleRender child elements in 3D space

Concrete code implementation

<div class="card-filp">
  <div class="back"></div>
  <div class="front"></div>
</div>

<style>
  .card-filp {
    height: 200px;
    width: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: 1s;
  }

  .front..back {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility:hidden
  }
  .front {
    background: lightgreen;
  }
  .back {
    background: lightblue;
  }
  .back {
    transform: rotateY(180deg);
  }
  .card-filp:hover {
    transform: rotateY(180deg);
  }
</style>
Copy the code