Sample code for implementing 3D rotation effect using pure CSS
|
Mainly use the preserve-3d and perspective properties in CSS to achieve 3D effects Effect
HTML Code
<body>
<div class="box">
<div class="face front">
<h2>Front</h2>
</div>
<div class="face back">
<h2>Back</h2>
</div>
</div>
</body>
To demonstrate the effect, center the element and set the body's CSS
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #333;
}
Box property settings
.box{
width: 300px;
height: 400px;
transform-style: preserve-3d;
position: relative;
}
.face{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
transition: 2s ease-in-out;
transform: perspective(500px) rotateY(0deg);
}
Front property settings
.face.front{
background: #ff0;
}
Back property setting, rotate 180 degrees on the Y axis, do not display it first
.face.back{
background: #3bc2ff;
color: #fff;
transform: perspective(500px) rotateY(180deg);
}
Set the floating animation effect
.box:hover .face.front{
transform: perspective(500px) rotateY(180deg);
}
.box:hover .face.back{
transform: perspective(500px) rotateY(360deg);
}
Set the floating effect of the text
.box .face h2{
font-size: 4em;
text-transform:uppercase;
transform: perspective(500px) translateZ(50px);
}
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. |
<<: 10 Tips to Improve Website Usability
>>: Three ways to refresh iframe
Recommend
The homepage design best reflects the level of the web designer
In the many projects I have worked on, there is b...
How to build and deploy Node project with Docker
Table of contents What is Docker Client-side Dock...
The process of installing MySQL 8.0.26 on CentOS7
1. First, download the corresponding database fro...
How to understand the difference between ref toRef and toRefs in Vue3
Table of contents 1. Basics 1.ref 2. toRef 3. toR...
MySql cache query principle and cache monitoring and index monitoring introduction
Query Cache 1. Query Cache Operation Principle Be...
Sample code for changing the color of a png image through a CSS3 filter
This method uses the drop-shadow filter in CSS3 t...
The benefits and examples of placing the site map at the bottom of the web page
In the past, almost every website had a sitemap p...
MySQL optimization strategy (recommended)
In summary: 1. Consider performance when designin...
An example of the execution order between the href jump and onclick of the html hyperlink a tag
The execution relationship between the href jump ...
Swiper.js plugin makes it super easy to implement carousel images
Swiper is a sliding special effects plug-in built...
How to quickly build your own server detailed tutorial (Java environment)
1. Purchase of Server 1. I chose Alibaba Cloud...
Docker-compose installation db2 database operation
It is troublesome to install the db2 database dir...
View the port number occupied by the process in Linux
For Linux system administrators, it is crucial to...
How to implement the webpage anti-copying function (with cracking method)
By right-clicking the source file, the following c...
Introduction to the usage of common XHTML tags
There are many tags in XHTML, but only a few are ...