Code example of pure CSS3 to achieve 3D flip effect

This article brings you code examples about pure CSS3 to achieve 3D flip effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

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

First step It's very simple. We simply draw a demonstration block and add transition and transform attributes to it :

// 本示例均使用Sass语法
.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:

What should be noted here

is: The transition attribute should be written on .block instead of hover. If the transition is only written on hover, it will not work when the mouse moves out. There is no transition effect. If we only write the transition on the hover:

The second step is more critical: we can easily find that it is always 1 Flip on a plane, it is not three-dimensional enough, so we need to change our thinking slightly - Use 2 layers of p nesting

// html部分
<div>
    <div></div>
</div>

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

The effect has not changed at this time, as follows:

This time

The key step is here: we need toadd perspective and transform-style attributes to the outer layer to add 3D to the entire animation Transformation effect:

.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
  /* 3D变形 */
  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 the ideas:

1. Create two layers of div inside and outside, and hover the mouse to When the outer layer is used, add a flip transform to the inner div: rotateY(180deg)
2. Pay attention to adding the transition attribute to the div that needs to be flipped, not when hovering.
3. Add perspective and transform-style to the outer div Attribute, finally achieve 3D flip effect

The above is the detailed content of Code example of pure CSS3 to achieve 3D flip effect. For more information, please follow other related articles on the PHP Chinese website!