Unaddressed CSS conflict, webkit-transform causing overlap

Question

I am using a Canvas template to make a website. I am trying to combine elements from the Flip Cards with other elements. Specifically modal boxes and light boxes, but the flip card text keeps on acting up, here are a few screenshots:

modal bug

nav bar bug

As you can see the flip card text is interfering not only with the modal boxes but the navbar as well.

I think I narrowed it down to this class:

.flip-card-inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

When I remove

-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);

the overlap is gone, but then the flip card is broken.

How can I fix this?