Problems with flip card in IE 11

Hello everyone (or another time), I have asked for a favor that I have done with pleasure, but favors are always paid dearly. I have been asked to add a flip card so that when people go to TEAM on the web, they will see the team and when they hover over the mouse they will see the contact info ... So far so good. The problem comes when they call me again saying that it does not go in IE 11. I've been with it all day, it's more or less, but the image vibrates when the flip card rotates and the last one disappears and appears. Let's see if someone can help me. I leave the code and the link of the web.

HTML

<div class="container-a">
  <div class="ateam">
    <?php 
    $Team = array(
    'post_type'      => 'post',
    'category_name'  => 'team',
    'posts_per_page' => 10
    );

    $Team_query = new WP_Query( $Team );

    if ( $Team_query->have_posts() ) : 
      while ( $Team_query->have_posts() ): 
        $Team_query->the_post(); 
    ?> 
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front">
          <?php echo the_post_thumbnail();?>
        </div>
        <div class="back">

          <div class="team-border">
            <div><h1><?php echo the_title();?></h1></div>

            <div class="team-contenta"><?php echo the_content();?></div>

            <div class="team-btns">
              <a class="team-btn" 
                href="tel:<?php echo (get_post_meta( get_the_ID(), 'tel', 'true' )); ?>"
                ><img src="<?php echo get_template_directory_uri()?>/images/btn_tel.png" /></a>
              <a class="team-btn" 
                href="mailto:<?php echo (get_post_meta( get_the_ID(), 'mail', 'true' )); ?>"
                ><img src="<?php echo get_template_directory_uri()?>/images/btn_mail.png" /></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  <?php endwhile;  wp_reset_postdata();  endif; ?>  
</div>      
</div>      

CSS

flip-container {
    -webkit-perspective: 1000px;
    transform-style: preserve-3d;
}
.flip-container:hover .back {
    transform: rotateY(0deg);
}
.flip-container:hover .front {
    transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
    width: 350px;
    height: 380px;
    margin: 2em;
    cursor: pointer;
}
.flipper {
    transition: 1.0s;
    transform-style: preserve-3d;
    position: relative;
}
.front,
.back {
    backface-visibility: hidden;
    transition: 1.0s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
    transform: rotateY(0deg);
}
.back {
    transform: rotateY(-180deg);
    text-align: center;
    background-color: #F29400;
    height: 347px;
}

URL of the website

P: D: here the container code also

.container-a {
  margin: auto;
  max-width: 900px;
}

.team {
  display: flow-root;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 100px;
}

.ateam {
  display: flow-root;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 100px;
}
.back-info {
  margin: 60px;
  border: 3px solid #9c9e9f;
  width: 230px;
}

.team h1,
.ateam h1 {
  font-size: 1.5em;
  font-weight: 900;
}

.team-content {
  text-align: center;
  font-size: 2em;
  line-height: 1em;
}

.team-contenta {
  text-align: center;
  font-size: 2em;
  line-height: 1em;
  padding: 1em;
}

.team-btns {
  margin-top: 2em;
}

.team-border {
  margin: 2em;
  border: 3px solid #9c9e9f;
}

THANK YOU IN ADVANCE !!!