Achieve 3D flip effect with pure CSS3 in a few simple steps

As a required course for front-end developers, CSS3 can help us achieve many basic animation effects. In this issue, we will use CSS3 to achieve the hover flip effect~

The first step is very simple. We simply draw a demo box and add transition and transform properties to it:

// This example uses Sass syntax.block {
  width: 200px;
  height: 200px;
  background: brown;
  cursor: pointer;
  transition: 0.8s;
  &:hover {
    transform: rotateY(180deg);
  }
}

Let's take a look at the effect at this time:

It should be noted here that the transition attribute should be written on .block instead of hover . If you only write transition on hover, there will be no transition effect when the mouse moves out. If we only write transition on hover:

The second step is more critical: we can easily find that it is always flipped on one plane, which is not three-dimensional enough, so we need to change our thinking slightly - use two layers of div nesting

// html part <div class="block">
    <div class="block-in"></div>
</div>

// CSS part.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
 
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
  
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

The effect remains unchanged at this time, as follows:

Now comes the key step : we need to add perspective and transform-style attributes to the outer layer to add a 3D deformation effect to the entire animation:

.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
  /* 3D deformation */
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
 
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
 
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

The final effect is as follows:

Finally, we summarize our ideas :

1. Create two div layers, inner and outer. When the mouse hovers over the outer layer, the inner div is flipped with transform: rotateY(180deg)

2. Note that you should add the transition attribute to the div that needs to be flipped, not when it is hovering.

3. Add perspective and transform-style attributes to the outer div to achieve a 3D flip effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.