By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
How to set the dropdown value by clicking on a table row
Javascript – How to set the dropdown value by clicking on a table row
JavaScript
Attempting to increase the counter, when the object's tag exist
Javascript – Attempting to increase the counter, when the object’s tag exist
JavaScript
Cycle2 JS center active slide
Javascript – Cycle2 JS center active slide
JavaScript
Can import all THREE.js post processing modules as ES6 modules except OutputPass
Javascript – Can import all THREE.js post processing modules as ES6 modules except OutputPass
JavaScript
How to return closest match for an array in Google Sheets Appscript
Javascript – How to return closest match for an array in Google Sheets Appscript
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > HTML & CSS > Card Design > HOW TO MAKE 3D POP UP CARD USING CSS ANIMATION
Card DesignHTML & CSS

HOW TO MAKE 3D POP UP CARD USING CSS ANIMATION

Admin
Last updated: 2022/11/30 at 5:18 AM
Admin
Share
7 Min Read
3D pop up card

In this article, we will see that how we can make 3D pop up card using CSS animation.

Contents
PREREQUISITES OF CREATING 3D POP UP CARD USING CSS ANIMATIONIMPLEMENTATION OF 3D POP UP CARD USING CSS ANIMATIONSTYLING THE CARDADDING ANIMATIONS TO CARDFULL SOURCE CODE OF 3D POP UP CARD USING CSS ANIMATIONindex.htmlOUTPUTYou may also like:

Basically, in this project we will create a card where we will put a image, after that the card will get flipped and image will get pop out of the card which actually looks pretty good and it’ll give 3D effect.

PREREQUISITES OF CREATING 3D POP UP CARD USING CSS ANIMATION

  • Basic knowledge of HTML.
  • Must be aware with CSS and its animations.
View Demo

IMPLEMENTATION OF 3D POP UP CARD USING CSS ANIMATION

Let’s create the index.html file, hit ! button and then tab button you’ll get basic HTML code for the title let’s give 3D POP-UP card and inside the body tag let’s create the <div> with class name “card” there is very few line of CSS code so that’s why we’re going to use internal CSS.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D Popup Card</title>
   
</head>

<body>
    <div class="card"></div>
</body>

</html>
        * {
            margin: 0;
        }

        body {
            height: 100vh;
            background-image: linear-gradient(45deg,
                    rgb(255, 68, 0),
                    orange);
            
        }

Let’s create the style tag so in order to prevent the browser’s default margin for the universal selector (*) we’re giving margin 0. let’s adjust this screen so now let’s style the body tag, let’s set the height of 100vh similarly let’s keep the linear background color so for that we’re writing background image linear gradient for the angle we’re giving 45 degree and for the second argument we’re giving coral so let’s change that color to little bit darker so for the second color we’re giving orange.

3D POP UP CARD

STYLING THE CARD

body {
            height: 100vh;
            background-image: linear-gradient(45deg,
                    rgb(255, 68, 0),
                    orange);
            display: flex;
            justify-content: center;
            align-items: center;
        }
.card {
            position: relative;
            height: 70vh;
            width: 25rem;
            
        }

        .card::before,
        .card::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-size: cover;
            border-radius: 1.5rem;
            transform: perspective(25rem) rotateX(var(--rotate, 0deg)) scale(var(--scale, 1));
            
        }

        .card::before {
            background-image: url('images/panda.jpg');
        }

        .card::after {
            background-image: url('images/panda.png');
        }

Let’s style this class card so for the class card let’s give the height of 70vh for the width we will give 25 rem. Similarly for the body, let’s give display flex just a content to center and also align items to center. for the class card let’s keep the before pseudo-element and also after pseudo-element we will give the common style for both before and after pseudo-element that’s the position of absolute.

so let’s keep the reference class scarf as a parent so for the class card let’s give the position relative. let’s give the width of 100% and also let’s give the height of 100% now let’s give background image for the background image in the URL let’s keep that image path, so we’re writing images/panda.jpg.

Let’s give background size for the background size set cover, for the before and after suit element let’s give border radius for the border radius set it 1.5 rem, let’s change that panda.jpg to panda.png.

So for the before and after pseudo-element let’s give background position of center and also let’s give transform, for the transform we will use rotate x for now let’s declare the variable so for the variable name we’re giving rotate and initially let’s keep this 0 degree and for this scale we’re again declaring another variable named scale and initially let’s keep the scale to 1,let’s give cursor to pointer.

3D POP UP CARD

ADDING ANIMATIONS TO CARD

        .card::before,
        .card::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            border-radius: 1.5rem;
            transform: perspective(25rem) rotateX(var(--rotate, 0deg)) scale(var(--scale, 1));
            transform-origin: bottom;
            transition: .5s ease-in-out;
        }

        .card:hover::before,
        .card:hover::after {
            --scale: 1.3;
        }

        .card:hover::before {
            --rotate: 65deg;
            filter: blur(.5px);
        }

Let’s change the rotate variables value, this rotate variable is declared at the top did you see that initially we have given the 0 degree, let’s change the rotated variable to 65 degree, after that for the both after and pseudo element let’s give the transition to 0.5 second transition duration and also for the timing function let’s give ease in and out.

now we want the 3D effect you know so in order to do that for the same transform property let’s keep the value of prospective, in the same line of prospective we will give 25rem, let’s change the after pseudo elements scale variable to 1.3, when you hover the class card you can give that blur effect for the before pseudo element so let’s give that so for that let’s write filter let’s give blur let’s give the value of 0.5 pixel. let’s change that transform origin so for the before and after pseudo element let’s give the transform origin to bottom.

FULL SOURCE CODE OF 3D POP UP CARD USING CSS ANIMATION

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D Popup Card</title>
    <style>
        * {
            margin: 0;
        }

        body {
            height: 100vh;
            background-image: linear-gradient(45deg,
                    rgb(255, 68, 0),
                    orange);
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .card {
            position: relative;
            height: 70vh;
            width: 25rem;
            cursor: pointer;
        }

        .card::before,
        .card::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            border-radius: 1.5rem;
            transform: perspective(25rem) rotateX(var(--rotate, 0deg)) scale(var(--scale, 1));
            transform-origin: bottom;
            transition: .5s ease-in-out;
        }

        .card::before {
            background-image: url('images/panda.jpg');
        }

        .card::after {
            background-image: url('images/panda.png');
        }

        .card:hover::before,
        .card:hover::after {
            --scale: 1.3;
        }

        .card:hover::before {
            --rotate: 65deg;
            filter: blur(.5px);
        } 
    </style>
</head>

<body>
    <div class="card"></div>
</body>

</html>

OUTPUT

3D POP UP CARD

And BOOM…. this is how you can make a very cool-looking and very awesome 3D popup card using CSS animation only.

View Demo
Download Code

You may also like:

  • How To Make Number Guessing Game JavaScript
  • Build a Simple Number Memorising Game In JavaScript
  • Build a Simple Digital Clock In JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: 3D POP UP CARD, Animation, UX Design
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article Form Validation How To Make Client-Side Form Validation Using JavaScript
Next Article Services Box With Flip Animation How To Make Responsive Services Box With Flip Animation
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Price Range Slider

How to Make Price Range Slider Using JavaScript

December 8, 2022
File Downlaoder Using JavaScript

How to Make File Downloader Using JavaScript

December 5, 2022
save text as File in HTML

How to Save Text as File in JavaScript

December 5, 2022
Calendar in HTML

How to Make Dynamic Calendar in HTML & JavaScript

December 5, 2022
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?