Dual Image Flip Card Effect for Eye-Catching Rotations

In the process of enhancing a website, I am interested in incorporating a feature that involves multiple cards with both front and back sides (each containing separate images). Initially, the plan is to display only the front side of the card. Upon clicking on the card, the goal is to make it rotate 360 degrees multiple times between the front and back before eventually showcasing the front side as a modal. It is also desired for this animation to reverse when the modal is closed.

Here is an example of what I am aiming for =>

Below is the basic HTML structure of the card:

<div class="card">
    <a class="card-img card-img-front" href="front.jpg">
        <img src="front.jpg" alt="Front of card">
    </a>
    <a class="card-img card-img-back" href="back.jpg">
        <img src="back.jpg" alt="Back of card">
    </a>
</div>

I am open to utilizing libraries for this task. Any suggestions or ideas on how to approach this?

My attempt using the Fancybox library was successful in creating the modal upon clicking the front part of the image, but I encountered challenges when trying to implement the back side, specifically the 360 rotation animation.

javascripthtmlcssfrontend

Answer №1

Check out this code snippet that demonstrates how to use the built-in onclick attribute to trigger a class change. For a live example, visit this link: here

    <style>
.card {
    width: 200px;
    height: 300px;
    perspective: 1000px;
}

.card-img {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.5s;
}

.card-img-back {
    transform: rotateY(180deg);
}

.flipped .card-img-front {
    transform: rotateY(180deg);
}

.flipped .card-img-back {
    transform: rotateY(0deg);
}
</style>
</head>
<body>

<div class="card" onclick="this.classList.toggle('flipped')">
    <div class="card-img card-img-front">
        <img src="https://i.ebayimg.com/images/g/9GgAAOSwWzRf6~P4/s-l960.webp" alt="Front of card" width=300 height=500>
    </div>
    <div class="card-img card-img-back">
        <img src="https://bicyclecards.org/wp-content/uploads/2019/11/red-56.jpg" alt="Back of card" width=300 height=500>
    </div>
</div>

Answer №2

If you want to achieve this effect without using any external libraries, I suggest looking into @keyframes in CSS. You can find more information about them here.

Here's an example of a 720° rotation:

function rotateCard(card) {
    card.classList.toggle('rotate');
}
.card-container {
    perspective: 2000px;
}

.card {
    position: relative;
    width: 100px;
    height: 150px;
    transform-style: preserve-3d;
}

.card .card-img {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card .card-img-front {
    background-color: #ccc;
    transform: rotateY(0deg);
}

.card .card-img-back {
    background-color: #f00;
    transform: rotateY(180deg);
}

.rotate {
    animation: rotateAnimation 2s linear;
}

@keyframes rotateAnimation {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(720deg);
    }
}
<div class="card-container">
  <div class="card" onclick="rotateCard(this)">
    <div class="card-img card-img-front">
        Front
    </div>
     <div class="card-img card-img-back">
       Back
   </div>
  </div>
</div>

If you want to focus on a specific card and have it displayed in the center of the screen while rotating, consider adding translation along with rotation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to confirm that the function handed over as a prop to a Vue component operates asynchronously

How can I determine if a prop Function is asynchronous? Consider the following prop in my component: callbackFunction: { type: Function, default: null, }, Is there a way to validate this and ensure that the provided Function i ...

javascriptvue.jsvue-component

Utilizing TypeDoc to Directly Reference External Library Documentation

I am working on a TypeScript project and using TypeDoc to create documentation. There is an external library in my project that already has its documentation. I want to automatically link the reader to the documentation of this external library without man ...

javascripttypescripttypedoc

Overlap bug with Flash content

In both Google Chrome (16.0.912.75 m) and Safari (5.1.1), I am encountering the well-known flash / html overlay issue. Despite setting the wmode attribute to transparent as suggested here and here, along with trying opaque, the problem persists. Following ...

htmlflashgoogle-chromez-indexwmode

What is preventing my Express.js from running properly?

My express.js application stops running after reaching this point: node app.js info - socket.io started I'm looking for guidance on why this error occurs and how to resolve it. It seems like the issue lies within my app.js file, which I've inc ...

javascriptnode.jsexpresssocket.iomongojs

What causes the discrepancy between a website's source code and the code viewed in the browser inspection tool? (Regarding web scraping)

This is my first programming project and I apologize in advance for any mistakes in terminology. My Objective: I am currently working on a project to scrape data from my local library's website. My main goal is to automate the process of renewing bo ...

htmlpython-3.xselenium-webdriverweb-scrapingbeautifulsoup

The interplay between javascript and PL/SQL tasks in a dynamic scenario

I'm attempting to run multiple pl/sql blocks within a Dynamic Action, providing real-time feedback to the user through a modal dialog displaying the current status. Here is an example of what I am trying to achieve: Processing Step 1... /*Run pl/s ...

javascriptajaxoracle-apex

Issue with the functionality of Material-ui tooltip

I'm exploring the implementation of the material-ui tooltip feature and I am hoping to have it displayed at the top of the element. Despite specifying placement="top", the tooltip still does not appear as intended. You can view a demo of this issue b ...

javascriptreactjsmaterial-ui

A guide on accessing JavaScript files from the components directory in a React Native iOS application

I am encountering difficulty in accessing the components folder within my React Native Project on IOS. The error message I am receiving is: Unable to resolve module ./Login from ....../ReactNative/ReactNativeProject/components/App.js: Unable to find ...

javascriptiosnode.jsreact-native

The navigation underline stays in place even after being clicked, and also appears below

Take a look at this js fiddle I've managed to create the underline effect on the navigation links when the user hovers over them. However, the underline only stays visible until the user clicks elsewhere on the screen. How can I make it persist as l ...

javascripthtmlcsstwitter-bootstrapangular

Obtaining exchange rate data in JSON format from fixer.io and displaying it in

Looking to extract the current USD to EUR exchange rate from fixer.io and display it as a single line in an HTML file, with the USD value represented using commas instead of periods. Any assistance would be greatly appreciated! Find the link here: { ...

htmljsonfixer.io

Guide on transferring a WordPress website to a new domain

I manage a WordPress blog on my main domain, but I am looking to duplicate the entire blog onto a secondary "dummy" domain so I can experiment with significant changes without impacting my primary domain. My main domain is and my dummy domain is Althoug ...

htmlwordpress

Responsive design with Bootstrap grids

In the current 3 column layout, as the browser window size decreases, the columns stack in the order of first, second, and third. However, I want the behavior to change so that when the columns get smaller, they stack in a different order. First - This ...

htmlbootstrap-4

Executing multiple functions with onPress in React Native

When I press onPress using TouchableOpacity, I am attempting to invoke multiple functions. Here's an example: functionOne(){ // perform an action } functionTwo(){ // execute something } <TouchableHighlight onPress{() => this.functionOne()}/& ...

javascriptreactjsreact-native

How to iterate through a JavaScript array in reverse order using a for loop and the array's length property

When looking to iterate through an array with the values [8,7,6,5,4], some may wonder why a for loop using the length of 5 continues to function even though there is no element at index 5 in the array. for(let i=array.length;i>=0;i++){ //do somethin ...

javascriptarraysfor-loopcontrol-flow

Console not displaying array output

Context: Currently, I'm in the process of developing an application that utilizes AJAX to fetch PHP arrays encoded into JSON format for dynamically constructing tables. However, I've encountered an issue where despite having no compilation errors ...

javascriptphparraysjsonajax

Using PHP and JavaScript to determine device screen width and eliminate the $_GET parameters from the URL

I have implemented the following JavaScript code to detect screen width and utilize it as a constant throughout my template files using conditional statements to control the visibility of different sections on my site. Just to clarify, I am working within ...

javascriptphp

Evaluation of Google Closure Library's performance

When researching the performance of JavaScript libraries, I come across numerous websites that compare the speed of popular libraries including: jQuery (known for being slow) Prototype (especially sluggish in IE) Dojo (considered the fastest when it come ...

javascriptjqueryperformancedojogoogle-closure-library

Generate HTML content based on the permissions from a REST API

I have a frontend that renders based on user permissions from a REST API. These permissions could include deleting users, creating users, adding users to workflows, and more. Most of these permissions are managed by an administrator. So my question is: H ...

javascripthtmlrestapivue.js

What is the best way to assign specific variables in a PHP loop using form input?

Let's say I have a basic HTML form displayed below: <div class="form-group"> <label class="control-label" for="checkboxes" name="industry">How would you classify your business?</label> ...

phphtmlarraysforms

Showcasing data from Django models in a tabular format

I am new to django and seeking assistance. I have developed a website but it's not fully operational yet. The model I created looks like this; from django.db import models class InductiveSensors(models.Model): Part_No = models.CharField(max_lengt ...

pythonhtmldjangourldjango-models