This JavaScript code snippet helps you to create flip card animation onclick event. It defines an event listener for a click on an HTML element with the CSS class “tile”. When this element is clicked, the function defined inside the event listener is executed. The function toggles the “is-flipped” class on the element, which changes its appearance. If the element has the “is-flipped” class, it is removed; otherwise, it is added. This allows the element to switch between two states with different visual styles each time it is clicked.
How to Create JavaScript Flip Animation
Create the HTML structure for flip animation as follows:
<div class="tile">
<div class="tile__face tile__face--front">
click?
</div>
<div class="tile__face tile__face--back">
clicked
</div>
</div>
Now, style the flip animation using the following CSS styles:
.tile {
margin: 3rem auto;
position: relative;
transform-style: preserve-3d;
transform-origin: center right;
transition: all 0.5s;
width: 12rem;
height: 16rem;
color: #fff;
font-family: sans-serif;
background-image: linear-gradient(
156deg,
rgba(89, 131, 252, 1) 0%,
rgba(39, 206, 56, 1) 100%
);
box-shadow: 0px 0px 25px -15px rgba(66, 68, 90, 1);
}
.tile:hover {
transform: translateY(-5%);
box-shadow: 0px 0px 40px -15px rgba(66, 68, 90, 1);
}
.tile__face {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
font-size: 2.3rem;
backface-visibility: hidden; /*hide element on back*/
}
.tile__face--back {
background-image: linear-gradient(
156deg,
rgba(252, 89, 92, 1) 0%,
rgba(206, 163, 39, 1) 100%
);
/* rotated on start so the front is visible first */
transform: rotateY(180deg);
}
.tile.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
Finally, add the following JavaScript function to activate flip animation:
const tile = document.querySelector(".tile");
tile.addEventListener("click", function () {
tile.classList.toggle("is-flipped");
});
That’s all! hopefully, you have successfully created the JavaScript flip animation. If you have any questions or suggestions, feel free to comment below.
