Animate the fire with a click instead of a hover

Is there a way to incorporate a flip animation into a button using a click event instead of hover? Perhaps starting with the + button on the frontside could be a good starting point.

Check out this link for reference

I have grasped that the animation is achieved through the following code:

.image-flip:hover .backside,
.image-flip.hover .backside {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: .25rem;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

However, my question is how can I trigger this animation based on a click event?

I am working with C# blazor and wondering if that changes anything.

Answer №1

Why not try using the :active selector? I believe a more effective approach would be utilizing JavaScript's onclick event to dynamically add or remove classes.

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

What is the best way to integrate Handlebars with Express?

Understanding the question isn't tough, but I'm unsure about integrating handlebars with Express. This is my current code: var express = require('express'); var app = express(); app.get('/', function (req, res, next) { ...

iOS 7 users experiencing webpage crashes

UPDATE: Success! After some trial and error, I discovered that iOS 7 is not compatible with vh units. I switched to using JavaScript for detecting the browser height, and now my website works flawlessly on iOS 7. I recently created a website that function ...

How can I send data to a Python script from a web application?

I have a Python script that requires 6 parameters to run, provided through the command line. python_file.py param1, param2, param3, param4, param5, param6 My goal is to pass these parameters from a web application built with Flask and Bootstrap. I want e ...

Sending Objects Array in POSTMAN using Hapijs: A Step-by-Step Guide

Could you please assist me on how to send a POST request in POSTMAN for the given array of objects and then validate it using Joi in a hapi server? var payload = [{ name: 'TEST Name 1', answer: 'TEST Answer 1', category: &a ...

Passing JavaScript Array to MVC Controller

I'm facing an issue with my JavaScript array when trying to send it to a controller. function SubmitData() { var dataCollection = new Array(); var test1 = { name: "Alice", age: "30", address: "123 Main St" }; dataCollection.push(test1); ...

What is the best way to showcase a PDF in Django that is saved as a blob in a MySQL database?

Within my web application, users have the ability to upload a PDF file which is then stored directly in the MySQL database for security reasons. Utilizing the code snippet below, this process allows the uploaded file to be safely saved within the database ...

Revamping MapReduce in MongoDB Version 2.4

After upgrading to MongoDB 2.4, I encountered an issue with a map function that uses db, as mentioned in the release notes. The release notes suggest refactoring, but I am unsure about the best approach to take. The part of the function that is no longer ...

What is the process for activating a script file once I have replaced HTML content using a backend method?

After receiving HTML content from the backend, including the <script> tags, I noticed that the scripts.js file does not seem to be activated. While the HTML content displays fine, changing the path to style.css successfully alters the appearance of ...

Only execute Angular run function upon redirection

I've recently started working with Angular and I'm facing some confusion with routes. I am using Asp.Net MVC in my project. I have a method in my Angular controller that I only want to run when the page loads for the first time after being redire ...

Send information from a Chrome extension to a .NET application

My goal is to transmit data from my chrome extension to my .net application using AJAX. I am utilizing a background script to send the data, but unfortunately I am not receiving the data on my server. I suspect there may be an issue with configuring the ...

Ideas for utilizing jQuery to extract data from CSS files

Hey there, I'm facing an issue on my HTML page where I have jQuery included. In my CSS file, I have quite a lot of lines and I'm trying to figure out how to read all styles for a specific element from the external CSS file rather than the inline ...

Please provide the text input for the specified version numbers (1.1, 1.2, 3.0, etc.)

I'm currently working on a form that includes a section for searching by version number: <label class="formLabel">Version</label> <html:text property="valueVersion" styleClass="value" tabindex="11"/> <br/& ...

Enhance the efficiency of the algorithm for combining text nodes that contain decorations

I'm seeking assistance in merging two arrays of nodes along with their decorations. My current algorithm is functional but highly inefficient. I would appreciate any suggestions for improvement or new ideas. Each node within the arrays contains text, ...

JavaScript: comparison between browser and native support for setTimeout and setInterval

In the world of programming, JavaScript is but a language that boasts various different implementations. One such implementation is the renowned V8 engine, which finds utility in both Google Chrome and Node.js. It's important to note that support for ...

activate a CSS-only modal with JavaScript

Is it possible to trigger a pure CSS modal using JavaScript (jQuery) without the need for a label, so that it activates when a user visits a page? http://jsfiddle.net/h84nubzt/ <label class="btn" for="modal-one">Example</a> <!-- Modal ...

Tips for converting a flat JavaScript array into a multidimensional one

I'm working on an example where I need to change some values. Here is the link to access it: http://jsfiddle.net/k83hj1jb/ The current output is a flat array: [ {"name":"options[11][140]","value":"140"}, {"name":"options[8][99]","value":"99" ...

The error message "Uncaught TypeError: Cannot read property 'getUniforms' of undefined" is thrown from the ThreeJS r82 Custom Shader in the three.min.js file at line

I've been working on setting up a js fiddle to showcase an issue I'm currently tackling with a custom shader. After linking it to three.min.js for r82, I encountered some runtime errors during rendering. Interestingly, this problem was absent whe ...

Navigating through dropdown browser menus using VBA

I am looking to automate the process of looping through a dropdown list on a specific website and downloading the latest file for each entry. I have successfully opened the website and clicked the "submit" button, but I am struggling to find a solution to ...

Interactive form components. Utilizing JavaScript to dynamically update existing values

I have a form that allows users to generate multiple form elements, such as repeat select boxes, dynamically. The relevant code snippet of the form in question is provided below: for ($i=0; $i < $number; $i++) { <labe ...