CSS 3D Card Flipping Animation

byCodingFlicks -October 04, 2023

0

CSS animation is a technique or feature of Cascading Style Sheets (CSS) through which the HTML elements of a website are given smooth and attractive animation. CSS can be used to animate HTML element properties like position, size, opacity, and more without the need for a difficult programming language like JavaScript. Today we will create a CSS card flip animation that will work like a 3D animation. An instructional video for creating this snippet is provided below. If you like, watch the tutorial video and become a subscriber to our YouTube channel.

Video Tutorial:

We Hope you have watched the CSS 3D Card Flip Animation video tutorial above. CSS animations play a beneficial role in website design. We can easily rely on CSS animations to make a website visually appealing and enhance the user experience. It is better to do the basic animations of the website with CSS instead of JavaScript because CSS animation is lightweight and easy to implement. One of the advantages of doing basic animations with CSS is that it does not slow down the loading speed and it helps in increasing the website performance.

CSS cards are a design pattern of websites through which information is presented to users in a structured way. If these CSS cards can be given a hover effect of 3D type then it will be more appealing to the users. A 3D card flip animation involves flipping or rotating the card in 3D space to reveal the back or front. The transition and transform properties of CSS are used to create the illusion of this three-dimensional flip. This method is used to present the content of a website to users in a dynamic way.

You may Also Like:

CSS 3D Flipping Card Animation [ Source Code ]:

The CSS and HTML files need to be generated first in order to make this CSS 3D flipping card animation clip. Copy the code below paste them into your project files and save it. To determine whether the code is functioning correctly or not, check the code in your browser. If you run into any issues, download the code from below download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- codingflcks.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Flipping Card Hover Animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="content">
            <div class="front">
                <h3>Hover Me!</h3>
            </div>
 
            <div class="back">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus corporis quos, sunt, nihil magnam molestias labore aliquid sapiente inventore reiciendis veniam, itaque praesentium accusamus? Inventore voluptates tempore neque asperiores impedit rem odit doloribus repellat rerum vero! Assumenda, eius sequi quas voluptatum dolor, ipsum beatae blanditiis aliquid quo velit impedit sapiente.
                </p>
            </div>
        </div>
    </div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background: orange;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	font-family: 'Montserrat', sans-serif;
}
.card {
	width: 22rem;
	cursor: pointer;
}
.content {
	text-align: center;
	position: relative;
	transition: all 2.25s;
	padding: 10em;
	transform-style: preserve-3d;
}
.card:hover .content {
	transform: rotateY(0.5turn);
}
.front, 
.back {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 2em;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	background: #212121;
	color: #fff;
}
.front h3 {
	transform: translateZ(5rem);
	font-size: 2rem;
	margin-top: 35%;
}
.back {
	transform: rotateY(0.5turn);
}
.back p {
	transform: translateZ(5rem);
}

By including pictures, social media font awesome icons, and other elements, you can turn this code into a dynamic 3D flipping profile card. Click the Load More button on the homepage to get more such snippets. If you believe the content on this website is useful, kindly spread the word. Thank you very much for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.