Design a Flip Card Effect using ReactJS
Last Updated :
30 Jul, 2024
Design a Flip Card Effect using ReactJS refers to adding flip animations to the react component. The flip card effect is where a card flips to reveal its backside when clicked or hovered over.
Prerequisites
Steps to create React Application
Step 1: Create a React application using the following command:
npx create-react-app demo
Step 2: After creating your project folder i.e. demo, move to it using the following command:
cd demo
Project Structure:
Approach 1: Using CSS styling
To design a flip card Effect using react JS we will create the card component with its front and back content and a flip button. When the button is clicked it switch between the card front and back content alogn with a transformed or flip effect as added in the css file.
Example: Created a horontal flip card effect with front and back content and a flip button.
CSS
/* Filename - App.css */
.App {
text-align: center;
margin: auto;
width: 50rem;
/* justify-content: center; */
}
.geeks {
color: green;
}
.container {
display: flex;
justify-content: center;
margin: auto;
}
.flip-card {
perspective: 1000px;
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.flip-card.flipped {
transform: rotateY(180deg);
}
.flip-card-inner {
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #d7fbda;
color: green;
}
.flip-card-back {
background-color: #fbd7f8;
color: blue;
transform: rotateY(180deg);
}
.card-content {
padding: 20px;
text-align: center;
}
.flip-button {
width: 100px;
padding: 10px;
font-size: 16px;
margin-top: 10px;
background-color: #f5d9fa;
border: none;
border-radius: 5px;
cursor: pointer;
}
// Filename - App.js
import React, { useState } from "react";
import "./App.css";
const App = () => {
const cardFront = "Welcome to GFG.";
const cardBack = "Computer Science Portal.";
const [isFlipped, setFlipped] = useState(false);
const handleFlip = () => {
setFlipped(!isFlipped);
};
return (
<div className="App">
<h1 className="geeks">GeeksforGeeks</h1>
<h3>React Example for Flip Card Effect</h3>
<div className="container">
<div
className={`flip-card ${
isFlipped ? "flipped" : ""
}`}
>
<div className="flip-card-inner">
<div className="flip-card-front">
<div className="card-content">
{cardFront}
</div>
<button
className="flip-button"
onClick={handleFlip}
>
Flip
</button>
</div>
<div className="flip-card-back">
<div className="card-content">
{cardBack}
</div>
<button
className="flip-button"
onClick={handleFlip}
>
Flip
</button>
</div>
</div>
</div>
</div>
</div>
);
};
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Approach 2: Using react-card-flip package
To flip a card, we will use React Flip Card which allows the flip card animations. It provides two child components, one for the front and the other for the back of the card. Moreover, it provides a prop isFlipped which can be used to show the front or back of the card.
Step to install: Install react-card-flip from npm.
npm i react-card-flip
depedencies list after installing packages
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-card-flip": "^1.2.2",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}Example: The below example will illustrate the working of flipping a card.
JavaScript
import React, { useState } from "react";
import ReactCardFlip from "react-card-flip";
function App() {
const [flip, setFlip] = useState(false);
return (
<ReactCardFlip isFlipped={flip}
flipDirection="vertical">
<div style={{
width: '300px',
height: '200px',
background: '#d7fbda',
fontSize: '40px',
color: 'green',
margin: '20px',
borderRadius: '4px',
textAlign: 'center',
padding: '20px'
}}>
Welcome to GFG.
<br />
<br />
<button style={{
width: '150px',
padding: '10px',
fontSize: '20px',
background: '#f5d9fa',
fontWeight: 'bold',
borderRadius: '5px'
}} onClick={() => setFlip(!flip)}>
Flip</button>
</div>
<div style={{
width: '300px',
height: '200px',
background: '#fbd7f8',
fontSize: '40px',
color: 'blue',
margin: '20px',
borderRadius: '4px',
textAlign: 'center',
padding: '20px'
}}>
Computer Science Portal.
<br />
<button style={{
width: '150px',
padding: '10px',
fontSize: '20px',
background: '#f5d9fa',
fontWeight: 'bold',
borderRadius: '5px'
}} onClick={() => setFlip(!flip)}>
Flip</button>
</div>
</ReactCardFlip>
);
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Similar Reads
Design a Rotating card effect using HTML and CSS
Rotating cards are the effect on cards that will rotate to some degree when you hover your mouse over them. There will be information, links, or images on the card which will be visible when you hover over the cards. In this article, you’re going to learn how to make rotating cards on your website u
3 min read
Create a Coin Flipping App using ReactJS
In this article, we will build a coin flipping application. In which the user can flip a coin and get a random result from head or tails. We create three components 'App' and 'FlipCoin' and 'Coin'. The app component renders a single FlipCoin component only. FlipCoin component contains all the behind
3 min read
ReactJS UI Ant Design Card Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Card Component is used as a simple rectangular container, and it is used when the user wants to display content related to a single subject. We can use the following approach in ReactJS to use the Ant Design C
3 min read
How to Design Hover Effect for Product Info Card using HTML & CSS ?
This project makes a Product info Card using HTML and CSS to display an image of the product, a description of the product, a button to order or purchase, a star rating of the product, etc. These help the users buy the product easily. There is a card at the center of the webpage. This product has a
7 min read
Animated expanding card using framer-motion and ReactJS
In this article, we are going to learn how to create an animated expanding card using react and framer. Prerequisites: Knowledge of JavaScript (ES6). JavaScript inbuilt methods we are going to make use are :Arrow function (ES6)Ternary operatorObjects in JavaScriptKnowledge of HTML/CSS.Basic knowledg
4 min read
Create a Coin Flipping App using React-Native
In this article we'll create a coin flipping app using React-Native. It allows users to simulate the flip of a coin and displays the result as either "Heads" or "Tails" with a corresponding image. The user can see the count of head and tails and can even reset the score. Preview of final output : Le
3 min read
Build a Flip the Card & Match Done Game using React
This application will provide users with the ability to play a fun and interactive game where they need to flip cards and match pairs with the same value. Along the way, we'll implement features like keeping track of the player's score, displaying a high score, and allowing the user to reset the gam
5 min read
Scratch Card Using React js
In this article, we will build a scratch card using ReactJS. A scratch card contains a reward; when the user scratches that card, the color present on the card will start erasing. And after erasing, the color content (reward) will be visible. Preview: Prerequisite React JSCSSReact HooksSteps to Crea
4 min read
Create a meme generator by using ReactJS
In this tutorial, we’ll create a meme generator using ReactJS. In the meme generator, we have two text fields in which we enter the first text and last text. After writing the text when we click the Gen button, it creates a meme with an image and the text written on it. Preview Image: PrerequisiteTh
3 min read
ReactJS UI Ant Design Icon Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Icon Component are very useful as Icons are required for every application for UI purposes. We can use the following approach in ReactJS to use the Ant Design Icon Component. Common Icon Props: className: It i
3 min read