Card Flip CSS的问题

Question

我有以下代码可用于翻转卡。但是在卡的背面，我有一个表格，它的左半部分不可单击。我在网上搜索，但似乎没有人像我一样遇到过这个问题。 我做错了还是浏览器有问题？ （Google Chrome 68.0.3440.106 64位）

var card = document.querySelector('.card');
var btncontato = document.querySelector('.btncontato');
var btncontato2 = document.querySelector('.btncontato2');
btncontato.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});
btncontato2.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});

.scene {
    width: 343px;
    height: 430px;
    margin: 40px 0;
    perspective: 600px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
}

.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    backface-visibility: hidden;
}

.card__face--front {
    background: #eee;
    cursor: default;
}

.card__face--back {    
    background-color: #eee;
    transform: rotateY( 180deg );
    cursor: default;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.btn-whats, .btn-whats:active, .btn-whats:focus, .btn-whats:hover {
	background-color: #34af23;
	text-decoration: none;
    border: 1px solid #34af23;
    padding: 8px 70px;
    color: #fff;
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.528571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    transition: all .3s ease .1s;
    border-radius: 3px;
}

.btn-whats:hover {
	color: #34af23;
	background: transparent;
}

<div class="scene">
	  <div class="card">
	    <div class="card__face card__face--front">
			<div class="col-md-12">
				<button type="button" class="btn btncontato">Contatar o corretor</button>
				<a href="https://api.whatsapp.com/send?phone=<?php echo $config_Footer_WhatsApp?>" target="_blank" class="btn-whats"><i class="fa fa-whatsapp"></i> Contatar via WhatsApp</a>				
			</div>
	    </div>
	    <div class="card__face card__face--back">
		    <div class="widget formularios-ficha">
		    	<button type="button" class="btn btncontato2"><i class="fa fa-arrow-left"></i></button> Mais <span>Informações</span> 
			    <form method="POST" action="<?= URL_ABSOLUTA.'modulos/email_sender.php'?>">
			      <input type="hidden" class="form-control" name="formName" value="f_mi_imovel" >
			      <input type="hidden" class="form-control" name="txtAssunto" value="[SITE] Nova Mensagem recebida - FICHA DE IMOVEL REF. <?=$imovel->getID()?>" >
			      <div class="form-group">
			          <div class="col-md-12">
			                <span class='help' style='display:none'>Como você se chama? *Obrigatório</span>
			                <input type="text" required class="form-control" name="txtNome" placeholder="Seu Nome"  > </div>
			      </div>
			      <div class="form-group">
			        <div class="col-md-12">
			              <span class='help' style='display:none'>Qual seu telefone? *Obrigatório</span>
			              <input type="text" required class="form-control" name="txtTelefone" id="" placeholder="Telefone"   > </div>
			      </div>
			      <div class="form-group">
			          <div class="col-md-12">
			              <span class='help' style='display:none'>Seu e-mail? *Obrigatório </span>
			              <input type="text" required class="form-control" name="txtEmail" placeholder="Seu Email"   >
			          </div>
			      </div>
			      <?php if(FORM_AGENDAVISITA && $h==2){?>
				      <div class="form-group">
				          <div class="col-md-12" style="margin-bottom:5px">
				              <div style="font-size:12px">
				                <input type="checkbox" value="0" id="ver-form-calendar" onclick="$('#form-calendar').toggle('slow')"> &nbsp;<b><i class="fa fa-calendar-check-o" aria-hidden="true"></i> Quero visitar este imóvel!</b>
				              </div>
				              <div id="form-calendar" style="display: none ">
				                <input type="text" class="form-control" id="txtdatahora" name="txtdatahora" placeholder="Data/Hora para Visitar este imóvel"  >
				                <div class="alert alert-info" style="font-size:10px; padding:8px; line-height:14px;" role="alert"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> Importante: Data/Hora de visita é uma informação sugestiva. A imobiliária irá retornar confirmando disponibilidade para esta data.</div>
				              </div>
				          </div>
				      </div>
			      <?php } ?>
			      <div class="form-group">
			        <div class="col-md-12">
			            <span class='help' style='display:none'>Suas dúvidas e comentários.</span>
			          <textarea class="form-control" required name="txtComentario"><?=$debug_Comentario?>Gostaria de mais informações sobre o imóvel código <?=$imovel->getID()?>.</textarea>
			        </div>
			      </div>

			      <?php if( GOOGLE_CAPTCHA != "" ){?>
			      <div class='form-group'>
			        <div class="col-md-12">
			          <div class="g-recaptcha" data-sitekey="<?php echo GOOGLE_CAPTCHA?>" style="margin-top:-70px;margin-bottom: -110px;" ></div>
			        </div>
			      </div>
			      <? } ?>

			      <div class="form-group">
			        <div class="col-md-12">
			          <button type="submit" class="btn btn-success btn-block" style="margin-top:80px"><i class="fa fa-send"></i> ENVIAR</button>
			        </div>
			      </div>


			    </form>
		    </div>
		</div>
	  </div>
	</div>