How to useCSS styling in ReactJS
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 : 50 rem; /* 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 -3 d; transition: transform 0.5 s; } .flip-card.flipped { transform: rotateY( 180 deg); } .flip-card-inner { width : 100% ; height : 100% ; transform-style: preserve -3 d; } .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( 180 deg); } .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.