Bring to the front the div altered by a CSS3 animation

Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot here.

To address this issue, I attempted to resolve it by adding z-index to the class applied upon clicking. Surprisingly, this fix worked perfectly on Chrome, FireFox, and Edge, but unfortunately failed on Safari.

@-webkit-keyframes flipAndZoomAnim
{
   0%   { -webkit-transform: rotateY(0deg) scale(0.5) translateZ(1px) }
   20%  { -webkit-transform: rotateY(180deg) scale(0.5) translateZ(1px) }
   40%  { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) }
   80%  { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) }
   100% { -webkit-transform: rotateY(180deg) scale(0.5 ) translateZ(1px) }
}

@keyframes flipAndZoomAnim
{
   0%   { transform: rotateY(0deg) scale(0.5) translateZ(1px) }
   20%  { transform: rotateY(180deg) scale(0.5) translateZ(1px) }
   40%  { transform: rotateY(180deg) scale(1.0) translateZ(1px) }
   80%  { transform: rotateY(180deg) scale(1.0) translateZ(1px) }
   100% { transform: rotateY(180deg) scale(0.5) translateZ(1px) }
}

.flipAndZoom {
    z-index: 5;
    webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation-name: flipAndZoomAnim;
    animation-name: flipAndZoomAnim;
}

While searching for solutions online, none of them seemed to involve animations. Suggestions like including translateZ(1px) or translate3d(0,0,0); didn't work for me.

When it comes to structuring the HTML, I have these cards displayed row by row within a div element, where they are dynamically added using JavaScript.

<div id="board">
     <div id="card1" class="card">
          <figure class="front">
               <img src="front.jpg"/>
          </figure>
          <figure class="back">
               <img src="back.jpg"/>      
          </figure>
     </div>

     <div id="card2" class="card">
          <figure class="front">
              <img src="front.jpg"/>
          </figure>
          <figure class="back">
              <img src="back.jpg"/>      
          </figure>
     </div>
</div>

An intriguing observation is how the zoomed-in card consistently gets displayed beneath the other cards without ever appearing on top.

If you want to explore the website featuring these cards, here's the link:

javascriptjqueryhtmlcss

Answer №1

Resolved

transformZ(1px)

was causing the problem. By changing it to 

transformZ(-1px)

, the issue was successfully rectified. This adjustment was necessary as the flipped cards were being translated in the wrong direction.

Answer №2

The z-index property should function properly, but the position rule might be overlooked.

To ensure that z-index works correctly, you need to set one of the following values for position: absolute, relative, or fixed. It seems that in this case, setting

position: relative;

would be preferred.

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

Can we leverage Angular service styles in scss?

I am working on a change-color.service.ts file that contains the following code snippet: public defaultStyles = { firstDesignBackgroundColor: '#a31329', firstDesignFontColor: '#ffffff', secondDesignBackgroundColor: '#d1 ...

cssangulartypescriptsass

Looking for a way to assign the (file path to kml) to a variable in your code while utilizing geoxml3?

Is there a way to store the KML file in a variable before parsing it with myParser? Check out this link for more information: https://github.com/geocodezip/geoxml3 var myParser = new geoXML3.parser({map: map}); myParser.parse('/path/to/data.kml' ...

javascriptangularjsgoogle-mapskmlgeoxml3

JQuery is failing to locate elements that have dynamic data titles assigned to them

I've been attempting to locate an element using a jQuery regex comparison in the data title. My situation involves having divs with the class .textbox, each containing a dynamically generated data title. To target specific boxes with that particular d ...

jqueryhtmlfindarabic

AngularJS directives and controller scope

I'm looking to create a custom directive in AngularJS that generates a div element as a title and a ul list below it. The title should be customizable through an attribute, while the list content is controlled by a designated controller. Check out t ...

javascriptangularjsangularjs-directive

Retrieve a single document using Angularfire2 without setting up a listener

I'm facing an issue with angularfire2 v6 and angular 11. Specifically, I am attempting to retrieve a single document from the users collection based on their email without utilizing valueChanges() or snapshotChanges(). Realtime updates are not necessa ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Angular2 - Access to fetch at 'https://example.com' from

Requesting some guidance on integrating the forecast API into my angular2 application. Currently facing a Cross-Origin Error while attempting to access the API. Any suggestions on resolving this issue? search(latitude: any, longitude: any){ consol ...

javascriptangulargetcross-domain

IE9 crashes when displaying elements with float:left style

After clicking the "off" and then "on" hyperlink in the provided HTML snippet, IE9 crashes. Here is the simplified version of the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD& ...

htmlinternet-explorer-9

Issue with Bootstrap 4 columns overlapping upon screen resizing

Whenever I use a row with 4 columns within a container that has 3 columns, the text file overlaps with the column containing an image when the screen size is reduced or viewed on an iPhone. Take a look at the code snippet and screen capture provided below ...

htmlcsstwitter-bootstrapbootstrap-4

Missing data: Node JS fails to recognize req.body

I've looked through various posts and I'm feeling quite lost with this issue. When I run console.log(req), the output is as follows: ServerResponse { ... req: IncomingMessage { ... url: '/my-endpoint', method: &a ...

javascriptnode.jsexpress

Is there a way to retrieve the disabled drop-down field value after submitting the form?

I'm struggling with a dropdown field that becomes disabled once an item is selected. After submitting the form, the dropdown field loses its value and I'm left with an empty field. Any suggestions on how to keep a value in the dropdown after subm ...

javascriptcssjquery

Tips for generating a single sitemap in Next.js

Utilizing the next-sitemap package to generate a sitemap, I have both dynamic and static pages. This is what my next-sitemap.config.js file looks like: module.exports = { siteUrl: 'https://example.com', generateRobotsTxt: false, excl ...

javascriptreactjsnext.js

Connecting Documents Together

I'm looking to learn how to link files together, specifically creating a button that when clicked takes you to another site or the next page of reading. I apologize if this is a simple question, as I am new to coding and only familiar with password-ba ...

html

Unable to relocate CSS Loader Container

Can someone help me with adjusting the placement of my container? I'm struggling to maintain the styles while getting rid of the position: absolute; on the .dot class. Every attempt I make is resulting in the dots moving erratically! To clarify, I w ...

htmlcsscss-animations

What steps should I take to delete a class from my calendar after it has reached the maximum capacity of 20

I am trying to create a feature that automatically removes a class from the calendar if more than 20 people have booked it. On the admin side of the system, I can add classes to the database but need help implementing this check. Below is my current code ...

javascriptphp

Exploring the Power of JQuery and Partial Views within the MVC Framework

This article discusses the topic of Jquery Partial View. You can find more information about it here. I am looking for guidance on how to submit user input values and send them to an ActionResult controller that returns a partial view. -- Below is the co ...

jqueryasp.netasp.net-mvc

Currently experimenting with jQuery in conjunction with the reddit API to generate individual divs for every post

Issue with displaying post titles, URLs, and permalinks separately. Need them to display together for each post. See the code below: $(document).ready(function() { $.getJSON( "http://www.reddit.com/r/pics.json?jsonp=?", function foo(data) { ...

javascriptjqueryhtmlcss

"Error: imports are undefined" in the template for HTML5 boilerplate

After setting up an HTML5 Boilerplate project in WebStorm, I navigate to the localhost:8080/myproject/src URL to run it. Within the src folder, there is a js directory structured like this: libraries models place.model.ts place.model.js addr ...

javascripttypescript

Developing a Form Submission Feature Using JQuery Mobile

I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...

javascripthtmljquery-mobile

Angular 2 signal sender

I have a specific class definition for my Project: export class Project { $key: string; file: File; name: string; title: string; cat: string; url: string; progress: number; createdAt: Date = new Date(); constructor(file: File) { th ...

javascriptangulartypescriptfirebase

Checkbox offering a tri-state option

Seeking help on creating a checkbox with three states. I have implemented a method to toggle between these states upon clicking. However, the issue is that this method is only triggered after the HTML changes. As a result, the checkbox's navigation be ...

htmlangulartypescriptangular2-forms