Problème de rotation sur une case de type Input

Bonjour, alors je fait spé ISN en Terminal, et je crée un jeu de mémory, tout fonctionne parfaitement... a un détaille prêt :D

Mes cartes sont de type 'input' et subissent une rotation(Y) au clique, la rotation de la carte se passe comme prévu et sans bug sauf qu'elle ne s'effectua que lorsque que je clique sur la partie gauche de la carte...

pour que vous voyez un peu plus, imaginez un rectangle , faites un axe verticale de symétrie au milieu... et je ne peux cliquer que sur la partie gauche... quand je clique sur la partie droite, rien ne se passe.. comme si je ne faisait rien....

Pourquoi ?

alors voici un extrait de code HTML :

<input type="submit" class="card" id="card_0" value="" onclick="paire('card_0')" /> <-- ceci est une carte (elle a une 'value' aléatoire au load de la page)

voici un extrait de code css :

.card{

width: 101px;

height: 156px;

margin: 20px;

margin-bottom: 10px;

color: transparent;

display: inline-block;

-webkit-transform: rotateY(-180deg);

background: url('dos_carte.jpg');

-webkit-background-size: cover;

border: none;

border-radius: 8px;

-webkit-transition: all 900ms;

font-size: 0px;

font-weight:bold;

vertical-align: top;

}

voici un extrait de code Javascript :

document.getElementById(id).style.webkitTransform = 'rotateY(0deg)'; <-- s'effectue notamment au clique de la carte

merci d'avance