CSS flippable cards are a design pattern used to create cards that can be flipped over to reveal additional content. This effect is achieved by using CSS transforms and transitions, along with a bit of JavaScript to toggle the classes that control the flipping effect.
The CSS flip card is a useful technique for creating a visually engaging user interface. It allows you to display additional information or options on the back of a card without taking up extra space on the screen. The flip effect can be triggered by hovering over the card or by clicking on it, depending on the design of your interface.
Here is an example of how you might create a flippable card using HTML, CSS, and JavaScript:
HTML:
<div class="card">
<div class="card-front">
<img src="card-front-image.jpg" alt="Card front image">
<h2>Card Title</h2>
</div>
<div class="card-back">
<img src="card-back-image.jpg" alt="Card back image">
<p>Additional information about the card</p>
</div>
</div>CSS:
.card {
perspective: 1000px;
position: relative;
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform 0.8s;
}
.card-front {
transform: rotateY(0deg);
}
.card-back {
transform: rotateY(180deg);
}
.flipped .card-front {
transform: rotateY(180deg);
}
.flipped .card-back {
transform: rotateY(360deg);
}JavaScript:
var card = document.querySelector('.card');
card.addEventListener('click', function()
{
card.classList.toggle('flipped');
});Code:
<!DOCTYPE html>
<html>
<title>Online CSS Editor</title>
<head>
<style>
.card {
perspective: 1000px;
position: relative;
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform 0.8s;
}
.card-front {
transform: rotateY(0deg);
}
.card-back {
transform: rotateY(180deg);
}
.flipped .card-front {
transform: rotateY(180deg);
}
.flipped .card-back {
transform: rotateY(360deg);
}
</style>
</head>
<body>
<h2>CSS Flippable Card Example</h2>
<div class="card">
<div class="card-front">
<img src="https://static.wixstatic.com/media/0f65e1_e87a0614c746426899c80f6b8e44aa62~mv2.jpg" alt="Card front image">
<p>Butterflies are nature's angels.</p>
<p>They remind us what a gift it is to be alive.</p>
</div>
<div class="card-back">
<img src="https://static.wixstatic.com/media/0f65e1_e0c2705706834199859231c2926e0edf~mv2.jpg" alt="Card back image">
<p>Bloom with full kindness</p>
</div>
</div>
<script>
var card = document.querySelector('.card');
card.addEventListener('click', function()
{
card.classList.toggle('flipped');
});
</script>
</body>
</html>Output;
Click on the image to see the output.
Conclusion:
It's important to note that the flip effect can be achieved with CSS alone and does not require any JavaScript. Additionally, the technique is relatively simple to implement and can be easily customized to match the design of your website or application. It's a good idea to test your flip card across different browsers and devices to make sure it works correctly and looks good on all platforms.
Comments