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

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.

<<:  Automatic line breaks in html pre tags

>>:  MySQL database deletes duplicate data and only retains one method instance

Recommend

JS implements layout conversion in animation

When writing animations with JS, layout conversio...

How to implement scheduled backup of CentOS MySQL database

The following script is used for scheduled backup...

How to handle MySQL numeric type overflow

Now, let me ask you a question. What happens when...

CentOS 7 switching boot kernel and switching boot mode explanation

centos7 switch boot kernel Note: If necessary, it...

MySQL/MariaDB Root Password Reset Tutorial

Preface Forgotten passwords are a problem we ofte...

Detailed tutorial on configuring nginx for https encrypted access

environment: 1 CentOS Linux release 7.5.1804 (Cor...

Example of adding and deleting range partitions in MySQL 5.5

introduce RANGE partitioning is based on a given ...

Detailed explanation of Nginx's rewrite module

The rewrite module is the ngx_http_rewrite_module...

The docker-maven-plugin plugin cannot pull the corresponding jar package

When using the docker-maven-plugin plug-in, Maven...

Solution to the welcome to emergency mode message when booting CentOS7.4

Today I used a virtual machine to do an experimen...

Detailed explanation of MySQL master-slave database construction method

This article describes how to build a MySQL maste...

MySQL multi-instance configuration solution

1.1 What is MySQL multi-instance? Simply put, MyS...

How to add automatic completion commands for docker and kubectl on Mac

Introduction to kubectl kubectl is a command line...