CODEWITHSUNDEEP
htmlcss
AMNeves
AMNeves

Reputation: 145

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

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!

Upvotes: 1

Views: 110

Answers (1)

Temani Afif
Temani Afif

Reputation: 273032

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>

Upvotes: 3

Related Questions