Effet "flip" : la suite !

J'ai marqué comme résolu ce problème, Je rappelle brièvement : il s'agissait d'un logo tournant sur lui-même avec un effet "flip-card", et deux images différentes sur chaque face, comme les deux côtés d'une pièce de monnaie.

Or, après plusieurs conseils et des corrections (pour l'essentiel des ajouts de préfixes "propriétaires", -webkit-, et autres), j'ai renoncé à avoir un rendu acceptable pour Chrome et IE, puisque des webmasters avertis (ce que je ne suis pas) ont produit des pages sur lesquelles ce problème n'est pas résolu. Les deux faces du logo affichent les deux images superposées (le côté "back" sur le côté "front").

Mais, de retour à mon cher Firefox, je constate à présent que le "logo" affiche le côté "front" sur les deux côtés ! Que s'est-il passé ??!!

Je rappelle le HTML :

<header>
<div id="logo">
	<div class="front"></div>
	<div class="back"></div>
</div>
</header>

et le CSS :

header{
    margin-bottom:40px;
    width:100px;
    height:100px;
    margin-left:300px;
	
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:perserve-3d
	-ms-transform-style:perserve-3d
    transform-style:preserve-3d;

    -webkit-perspective:500;
    -moz-perspective:500;
    -ms-perspective:500;
    perspective:500;
	    }
#logo, #logo>div{
    width:inherit;
    height:inherit;
    -webkit-transition:-webkit-transform 0.5s ease;
	-moz-transition:-moz-transform 0.5s ease;
	-ms-transition:-ms-transform 0.5s ease;
    transition:transform 0.5s ease;
    }
#logo{
    box-shadow:5px 5px 10px;
    border-radius:50%;
    padding:5px;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:perserve-3d
	-ms-transform-style:perserve-3d
    transform-style:preserve-3d;
    
    }
#logo>div{
    position:absolute;
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    backface-visibility:hidden;
    }
.front{
    background:url('face.png');
    -moz-transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
    transform:rotateY(0deg);
    }
.back {
    background:url('pile.png');
    -moz-transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    transform:rotateY(180deg);
    }
header:hover #logo, header:active #logo{
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-ms-transform:rotateY(180deg);
    transform:rotateY(180deg);
    }

CSS nous réserve toujours des surprises !!

Quelqu'un a-t-il une explication ?