How to useCSS styling in ReactJS

Approach 2: Using react-card-flip package

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.

Javascript

// 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">w3wiki</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;

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;
}

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.

Design a Flip Card Effect using ReactJS

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.