Sample code for implementing 3D rotation effect using pure CSS

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

Detailed explanation of angular content projection

Table of contents Single content projection Multi...

How to query the minimum available id value in the Mysql table

Today, when I was looking at the laboratory proje...

centos7.2 offline installation mysql5.7.18.tar.gz

Because of network isolation, MySQL cannot be ins...

Detailed explanation of the steps for configuring the Centos7 bridge network under VMware

The complete steps of Centos7 bridge network conf...

Solution - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Insufficient permissions

1) Enter the folder path where the jdk file is st...

MySQL not null constraint case explanation

Table of contents Set a not null constraint when ...

About Vue virtual dom problem

Table of contents 1. What is virtual dom? 2. Why ...

In-depth analysis of MySQL lock blocking

In daily maintenance, threads are often blocked, ...

Summary of commonly used SQL in MySQL operation tables

1. View the types of fields in the table describe...

How to avoid duplication of data when inserting in MySql batch

Table of contents Preface 1. insert ignore into 2...

Abbreviation of HTML DOCTYPE

If your DOCTYPE is as follows: Copy code The code ...

Implementation of 2D and 3D transformation in CSS3

CSS3 implements 2D plane transformation and visua...

The difference and advantages and disadvantages of Mysql primary key UUID and auto-increment primary key

introduction I used postgresql database for some ...

Box-shadow and drop-shadow to achieve irregular projection example code

When we want to add a shadow to a rectangle or ot...

Understand the principles of MySQL persistence and rollback in one article

Table of contents redo log Why do we need to upda...