How to achieve flip effect in css

How to achieve the flip effect in css: first create a demonstration block and add the transition and transform attributes to it; then add the transition attribute to the p that needs to be flipped; finally add the perspective and transform-style attributes. .

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

As a required course for front-end developers, CSS3 can take us through There are 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 demonstration square 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 needs to be noted here is:

The transition attribute needs to be written On .block instead of hover, if we 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 always flipping on one plane is not three-dimensional enough, so we need to change our thinking slightly—— Use 2 layers of p nesting

// html部分
<div class="block">
    <div class="block-in"></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:

At this timeThe key step 1

is here: we need

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变形 */
  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 Let's summarize the ideas

:

1. Create two layers of p inside and outside. When the mouse hovers to the outer layer, add a flip transform to the inner layer p: rotateY(180deg)

2 .Pay attention to adding the transition attribute to the p that needs to be flipped, instead of hover

3. Add perspective and transform-style attributes to the outer layer p to finally achieve the 3D flip effect

Recommended learning: "

css video tutorial"

The above is the detailed content of How to achieve flip effect in css. For more information, please follow other related articles on the PHP Chinese website!