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

Detailed tutorial on installing pxc cluster with docker

Table of contents Preface Preliminary preparation...

JavaScript to achieve custom scroll bar effect

In actual projects, the up and down scroll bars a...

Basic reference types of JavaScript advanced programming

Table of contents 1. Date 2. RegExp 3. Original p...

Native JS encapsulation vue Tab switching effect

This article example shares the specific code of ...

What does mysql database do?

MySQL is a relational database management system....

Vue uses vue meta info to set the title and meta information of each page

title: vue uses vue-meta-info to set the title an...

Pure CSS to achieve cool neon light effect (with demo)

I have recently been following the CSS Animation ...

Introduction to common commands and shortcut keys in Linux

Table of contents 1 System Introduction 2 System ...

Learn the common methods and techniques in JS arrays and become a master

Table of contents splice() Method join() Method r...

js to implement file upload style details

Table of contents 1. Overview 2. Parameters for c...

How to install and deploy ftp image server in linux

Refer to the tutorial on setting up FTP server in...

Intellij IDEA quick implementation of Docker image deployment method steps

Table of contents 1. Docker enables remote access...

Full HTML of the upload form with image preview

The upload form with image preview function, the ...