Flip animation with text only works on Firefox, any way to make it cross browser?

Question

I'm trying to create a simple flip animation with an image and text, when hovered the image will flip and show the text, which was previously hidden. What I have now works and it's what i want, problem is, it only works in Firefox for some reason.

The code is pure html + CSS, I provided a jsfiddle with the issue reproduced. Try it on Firefox and then Edge or chrome to see my problem.

    .Features-logo {
      height: 40vmin;
      pointer-events: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
    
    .flip-card {
      width: 40vmin;
      height: 40vmin;
    }
    
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
    
    }
    
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }
    
    .flip-card-front,
    .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .flip-card-front {
      background-color: white;
      color: black;
    }
    
    .flip-card-back {
      background-color: white;
      color: red;
      transform: rotateY(180deg);
      backface-visibility: hidden;
      top: 40%;
    }

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src='http://pngriver.com/wp-content/uploads/2018/04/Download-Dog-PNG-Image.png' class="Features-logo" alt="logo" />
    </div>
    <div class="flip-card-back">
      <h1>BORK</h1>
    </div>
  </div>
</div>

Would like this animation to work in all modern browsers but I'm a bit lost!

Thank you in advance!

here is a [cross browser solution](https://davidwalsh.name/css-flip) — cloned, Jun 26 '19 at 09:33
seems to work fine on my Chrome (Windows 10 - Chrome 75.0.3770.100 (64 bits)) — Kaddath, Jun 26 '19 at 09:34
How specifically do you want it to behave? Do you want the image to show on the front and the text to show on the back? Or do you want the image on the front and the image with text on the back? — showdev, Jun 26 '19 at 10:01
@showdev Image on the front and image with text on the back. If you run the snippet in Firefox you can see the expected — AMNeves, Jun 26 '19 at 10:03
For me, it's the same in Chrome and Firefox: just the image flipping. Thanks for clarifying the desired behavior. — showdev, Jun 26 '19 at 10:34

Temani Afif · Accepted Answer · 2019-06-26T10:04:34.490

You need to consider transform-style: preserve-3d; on the parent element and also backface-visibility: hidden; on the front element (not only the back one). Also better use top:0 for the back element and consider something else to position the text inside. Doing so you will be sure the back element will fully cover the front one.

^{Not all the properties are needed in some browsers but this will make sure it will work the same in all the browsers}

.Features-logo {
  height: 40vmin;
  pointer-events: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.flip-card {
  width: 40vmin;
  height: 40vmin;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style:preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
}

.flip-card-front {
  background-color: white;
  color: black;
  backface-visibility: hidden;
}

.flip-card-back {
  background-color: white;
  color: black;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src='http://pngriver.com/wp-content/uploads/2018/04/Download-Dog-PNG-Image.png' class="Features-logo" alt="logo" />
    </div>
    <div class="flip-card-back">
      <h1>BORK</h1>
    </div>
  </div>
</div>

If you want to keep the image, remove backface-visibility from the image and the background from the text:

.Features-logo {
  height: 40vmin;
  pointer-events: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.flip-card {
  width: 40vmin;
  height: 40vmin;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style:preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
}

.flip-card-front {
  background-color: white;
  color: black;
}

.flip-card-back {
  color: black;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src='http://pngriver.com/wp-content/uploads/2018/04/Download-Dog-PNG-Image.png' class="Features-logo" alt="logo" />
    </div>
    <div class="flip-card-back">
      <h1>BORK</h1>
    </div>
  </div>
</div>

Using this code the image disappears when it turns, any way to make it flip as in my snipped? — AMNeves, Jun 26 '19 at 09:58
*the image disappears when it turns* --> this is the purpose of the flip, no? — Temani Afif, Jun 26 '19 at 10:01
@AMNeves if you want the image to be kept, remove backface property from the image and remove the white background from the text — Temani Afif, Jun 26 '19 at 10:02
Usually yes, but in my case I want to keep the image flipped with text too — AMNeves, Jun 26 '19 at 10:04

Flip animation with text only works on Firefox, any way to make it cross browser?

1 Answers1

Linked