Home  >  Article  >  Web Front-end  >  How to achieve flip effect in css

How to achieve flip effect in css

藏色散人
藏色散人Original
2021-04-02 10:54:3012435browse

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. .

How to achieve flip effect in css

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn