In this article, we will see that how we can make 3D pop up card using CSS animation.
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.
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.
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.
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
And BOOM…. this is how you can make a very cool-looking and very awesome 3D popup card using CSS animation only.
