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

Example of how to set div background transparent

There are two common ways to make div background ...

Monitor the size change of a DOM element through iframe

A common problem encountered during the developme...

Summary of standard usage of html, css and js comments

Adding necessary comments is a good habit that a ...

Detailed explanation of Linux zabbix agent deployment and configuration methods

1. Install zabbix-agent on web01 Deploy zabbix wa...

Detailed explanation of the difference between MySQL normal index and unique index

Table of contents 1 Conceptual distinction 2 Case...

Detailed explanation of count without filter conditions in MySQL

count(*) accomplish 1. MyISAM: Stores the total n...

JavaScript Closures Explained

Table of contents 1. What is a closure? 1.2 Memoi...

Detailed tutorial on deploying apollo with docker

1. Introduction I won’t go into details about apo...

How to set and get the number of Mysql connections

Get the number of connections --- Get the maximum...

Installation and use of mysql mycat middleware

1. What is mycat A completely open source large d...

Weather icon animation effect implemented by CSS3

Achieve results Implementation Code html <div ...

js implements a simple countdown

This article example shares the specific code of ...

MySQL 5.7.12 installation and configuration tutorial under Mac OS 10.11

How to install and configure MySQL on Mac OS 10.1...

Solution to the error when installing Docker on CentOS version

1. Version Information # cat /etc/system-release ...

Two methods of restoring MySQL data

1. Introduction Some time ago, there were a serie...