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

Tips for sending a variable from Javascript to node.js, specifically connecting to MYSQL

Can you help me with a simple example on how to pass a variable from JavaScript to Node.js? I need to store the user input from a text box in Node.js and perform some actions. Client <!DOCTYPE html> <html> <body> <h2>HTML Forms< ...

javascriptmysqlnode.js

How to arrange elements at the same level in Node.js using sequelize-hierarchy?

Is there a way to change the order of items on the same level in sequelize-hierarchy for creating a menu? I've noticed that currently, the items are ordered by their sequence of insertion. But what if I want to manually set the order? Here is an exam ...

javascriptnode.jsdatabase-designmenusequelize.js

Dynamic loading of XML data into a DIV when hovering over it

The main idea behind my project is quite simple. I have a grid of company logos extracted from an XML document using XSLT, each logo with its own unique link to the respective company profile. On the same page, I have a separate div that serves as a "prev ...

javascriptjqueryxmlajax

How to Show a Div When Clicking using Javascript

Looking for a way to toggle the visibility of a div element on click and hide it when clicked anywhere else. window.addEventListener('load', function() { $$('a.tooltip').each(function(link) { var tooltip = document. ...

javascripthtmlonclick

Unlock the secrets of creating an interactive chat room effortlessly by harnessing the power of J

In search of implementing a unique chat room using PHP and JavaScript (Jquery) offering group chat as well as private chat functionalities. The challenge lies in finding a way to continuously update the interface seamlessly, while also displaying 'X ...

phpjavascriptjqueryajaxajax-polling

Utilize Node.js to proxy Angular requests to a service hosted on Azurewebsites

I am trying to set up a proxy post request in my Node.js server and receive a response from the target of this request. Below is an excerpt from my server.js file code where I have implemented the proxy, but I am facing a issue with not receiving any respo ...

javascriptnode.jsproxyazure-web-app-servicehttp-proxy

Pagination Component for React Material-UI Table

I am interested in learning about Table Pagination in React UI Material. Currently, my goal is to retrieve and display data from an API in a Material UI Table. While I have successfully implemented some data from the API into the Material UI Table, I am ...

javascriptreactjsmaterial-ui

I am interested in showcasing a card when it is hovered over

I am having trouble with a hover effect to display a hidden card. I have two div elements, one is labeled single-album and the other hide. I used the + selector to set the hide div to display none initially, but the hover effect is not working as expecte ...

htmlcsscss-selectorsmousehoveronhover

Trouble with the Rotate <text> feature in Internet Explorer 11 on Windows 10

I am using d3.js to draw SVG with the transform:rotate(180deg) property. It displays perfectly on Chrome, but doesn't work on IE11. I tried changing it to rotateY(180deg), and it works with div elements but not with text elements. Here is my screen an ...

htmlcssinternet-explorersvginternet-explorer-11

How can a single item from each row be chosen by selecting the last item in the list with the radio button?

How can I ensure that only one item is selected from each row in the list when using radio buttons? <?php $i = 1; ?> @foreach ($products as $product) <tr> <td scope="row">{{ $i++ }}</td> <td>{{ ...

javascriptphphtmllaravel

An issue occurred while attempting to utilize fs.readFileSync

Attempting to change an uploaded image to base 64 format var file = e.target.files[0]; var imageFile = fs.readFileSync(file); var encoded = new Buffer(imageFile).toString('base64'); An error is encountered: TypeError: __W ...

javascriptnode.js

How to use JavaScript regular expressions to extract the content following the second-to-last occurrence of a back

I currently have a regular expression that looks like this: /^.*[\\\/]/ At the moment, it removes every single backslash from a string. However, now I need to modify it in order to capture everything after the second to last backslash. Fo ...

javascriptregex

Merge two JSON objects together by matching their keys and maintaining the original values

After having two separate JSON objects representing data, I found myself in the position of needing to merge them into one combined result. The initial objects were as follows: passObject = { 'Topic One' : 4, 'Topic Two' : 10, &apos ...

javascriptnpmlodash

The jQuery `.load` function appears to be malfunctioning

I am having trouble getting my simple .load() function from jQuery to work. When I click on my DIV, nothing happens. However, the alert TEST does work. <div class="ing">CLICK HERE</div> <div id="overlay3-content"></div> <scrip ...

javascriptjqueryhtml

Integrating node.js into my HTML page

Forgive me for sounding like a newbie, but is there a simple way to integrate node.js into my HTML or perhaps include a Google API library? For example: <script>google.load(xxxx)</script> **or** <script src="xxxx"></script> ...

javascripthtmlnode.jsgoogle-api

Ways to extract specific HTML from a jQuery element

When fetching html from a website, how can I extract specific html content instead of getting all of it? I have attempted the following method: Before appending data to the target below container.html(data); I would like to perform something like data.f ...

javascriptjqueryhtmlcss

Collaborate and pass around SQL connections among different modules

One of my recently developed modules consists of three main functions: Establishing a SQL connection Executing a query Closing the connection This module is called in script.js along with other custom modules responsible for various operations that requi ...

javascriptnode.js

Steps for implementing a conditional statement to handle an empty string in HTML

I need to figure out how to display a different message if my string is empty. Can anyone help me with this? <div class="padding" id="dealBorder"> <pre id="informationDealText"><pan class="inner-pre" style="font-size: 24px; color: whi ...

javascripthtmlangularjsionic-framework

Prevent users from saving changes made to dropdown menu values (as well as other user-inputted content) using Inspect Element on the website before it

Recently, I started testing my website for bugs and stumbled upon a major issue that caught me by surprise. I never realized that changes made with Firebug or similar plugins on websites could actually be saved and implemented. Despite my efforts to preve ...

htmlformssecurityfirebugweb-inspector

Exploring Angular controller inheritance and the ability to override methods from a superclass

Is it possible to call a function on the superclass controller when extending a controller in Angular and overriding a function? To illustrate with an example in Java: class Foo { void doStuff(){ //do stuff } } class FooBar extends Fo ...

javascriptangularjsinheritance