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
Table of contents Preface Preliminary preparation...
In actual projects, the up and down scroll bars a...
Table of contents 1. Date 2. RegExp 3. Original p...
Table of contents 1. typeof operator 2. instanceo...
This article example shares the specific code of ...
MySQL is a relational database management system....
title: vue uses vue-meta-info to set the title an...
Table of contents 1 Introduction 2 Prerequisites ...
I have recently been following the CSS Animation ...
Table of contents 1 System Introduction 2 System ...
Table of contents splice() Method join() Method r...
Table of contents 1. Overview 2. Parameters for c...
Refer to the tutorial on setting up FTP server in...
Table of contents 1. Docker enables remote access...
The upload form with image preview function, the ...