3D on click Card Flip animation

Card flip animation is a visual effect that we see on various websites or apps. This animation shows a profile card or digital card flipping from one side to the other. This animation can be achieved with the hover effect. Simple HTML and CSS are required to make this animation on hover. Today, we will see how to achieve this animation in a click event. This animation is used in websites and apps to provide an engaging experience for users. A detailed video about this animation is given below. Watch the video to understand the source code we have provided. If our channel videos are of any benefit to you, then subscribe to our YouTube channel and stay with us.

Video Tutorial:

Hope you have watched the above video tutorial. The first step in creating the card flip animation is to design the card with HTML and CSS. We have placed a picture as our Design A front card. After that, We put some text content on the back card. Transform-style:preserve-3d and transform rotateY values are used to give a 3D feel during card flip animations. When the card is clicked, we toggle an 'animate' class on the card using the toggleClass() method of jquery. Watch the video above to understand the whole thing better.

You May Also Like:

3D on click Card Flip animation [ Source Code ]:

To create this animation you first have to create HTML and CSS files. After that, we have to link the files properly. you can keep the js code underneath the HTML file or you can create a separate js file for that. Paste the code given in the code box below into your files. You can also save the code and then open it in a web browser. If the code doesn’t work, download it from the download button given below. Try to make your code more dynamic once you have it done.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card flip on click</title>
    <link href="https://fonts.googleapis.com/css2?family=Arizonia&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">    
</head>
<body>
  
<div class="content-area">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-sm-12">
        <div class="box">
          <div class="content">
              <div class="front img-1"> 
                  <!-- front content -->
              </div>
              <div class="back">
                <div class="back-content">
                  <h2>Product Name</h2>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, officia?</p>
                </div>
              </div>
          </div>
      </div>
      </div>
      <div class="col-lg-4 col-sm-12">
        <div class="box">
          <div class="content">
              <div class="front img-2">
                  <!-- front content -->
              </div>
              <div class="back">
                  <div class="back-content">
                    <h2>Product Name</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, officia?</p>
                  </div>
              </div>
          </div>
      </div>
      </div>
      <div class="col-lg-4 col-sm-12">
        <div class="box">
          <div class="content">
              <div class="front img-3">
                  <!-- front content -->
              </div>
              <div class="back">
                <div class="back-content">
                  <h2>Product Name</h2>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, officia?</p>
                </div>
              </div>
          </div>
      </div>
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    $('.box .content').click(function() {
	$(this).closest('.box').toggleClass('animate');
    $(this).css('transform, rotateY(180deg)');
});
</script>
</body>
</html>

ADD CSS:

body{
	background: #1c63f7;
}
.content-area {
	padding: 10% 0;
}
.box.animate .content {
    transform: rotateY(180deg);
}
.box,
.front, 
.back {
	width: 345px;
	height: 400px;
}
.content {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}
.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
    transform: rotateY(0deg);
}
.back {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 15px;
    transform: rotateY(180deg);
    background-color: beige;
}
.back-content {
	border: 10px inset #ddd;
	padding: 120px 5px;
}
.back-content h2 {
	font-family: 'Arizonia', cursive;
	font-size: 40px;
}
.img-1 {
    background: url(img/1.jpg);
    background-size: cover;
	background-position: center center;
}

.img-2 {
    background: url(img/2.jpg);
    background-size: cover;
	background-position: center center;
}

.img-3 {
    background: url(img/3.jpg);
    background-size: cover;
	background-position: center center;
}

@media (min-width: 768px) and (max-width: 991px) {
	.box, .front, .back {
		width: 100%;
		margin-bottom: 30px;
	}
	.back-content {
		padding: 120px 60px;
	}
}

@media (max-width: 767px) {
	.box, .front, .back {
		width: 100%;
		margin-bottom: 30px;
	}
	.back-content {
		padding: 100px 5px;
	}
}

I hope that you have successfully implemented the code. Our website has many projects including CSS animations, responsive website design, JavaScript projects, etc. If you want to get more of what you like you can load more by clicking the Load More button at the bottom of our homepage. We hope our website contents are useful to you, so if you like the website's content, then please share them on social media. Your contribution will motivate us to be better at what we do. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

3D on click Card Flip animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

3D on click Card Flip animation

Video Tutorial:

3D on click Card Flip animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form