CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Waltari
Waltari

Reputation: 1249

Display div affected by CSS3 animation on top

I have a div card that plays an animation on click, which includes the card scaling to be larger. The problem is that as the card scales bigger, it's edges are displayed under other cards. http://puu.sh/oqtEs/5c0d525f8d.png

I was able to fix this by adding z-index to the class that gets applied on click, but it did not work on Safari, but did work on Chrome, FireFox and Edge.

@-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;
}

There is some solutions on how to do this online, but I found none with animations. Including the translateZ(1px), was suggested but did not work, as well as translate3d(0,0,0);

HTML

<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>

I have the cards displayed row by row in a div, to which they are added by JavaScript.

   for (int i = 0; i < 20; i++) {
        $('#board').append(card.getHTML());
    }

What I find interesting that the zoomed in card is systematically displayed under the other cards, but never over.

Here is the website: http://valtterilaine.bitbucket.org/public_html/

Upvotes: 8

Views: 304

Answers (2)

Waltari
Waltari

Reputation: 1249

Changing

translateZ(1px)

to 

translateZ(-1px)

fixed the issue. Since the cards are flipped they were being translated backwards.

Upvotes: 2

Jakub Rożek
Jakub Rożek

Reputation: 2130

Z-index should do its job, howerver may be missing the position rule.

In order to make z-index work, you must set either on of following values for position: absolute, relative or fixed. In this case the 

position: relative;

is desired, I suppose.

Upvotes: 0

Related Questions