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
When writing animations with JS, layout conversio...
The following script is used for scheduled backup...
Now, let me ask you a question. What happens when...
centos7 switch boot kernel Note: If necessary, it...
In cells, dark border colors can be defined indiv...
Preface Forgotten passwords are a problem we ofte...
environment: 1 CentOS Linux release 7.5.1804 (Cor...
introduce RANGE partitioning is based on a given ...
The rewrite module is the ngx_http_rewrite_module...
When using the docker-maven-plugin plug-in, Maven...
Today I used a virtual machine to do an experimen...
This article describes how to build a MySQL maste...
1.1 What is MySQL multi-instance? Simply put, MyS...
In the previous article, we introduced how to for...
Introduction to kubectl kubectl is a command line...