css在不同的浏览器中翻转卡片

Question

Hi i need to make flipping cards effect in different browsers but it correctly works only in chrome and opera...in different browsers it doesn't change image or change image but doesn't flipp... can you help me?? this is my CSS code:

.flip-container {
    perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 400px;
    height: 200px;
}

/* flip speed goes here */
.flipper {
    transition: 0.4s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

textarea {
    resize: none;
}

and this is my Html code:

<div id="sekcia">
                <a href="http://<?echo $_SERVER['SERVER_NAME'];?>/sk/hudba">             <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div class="flipper">
                        <div class="front">
                            <img src="http://<?echo $_SERVER['SERVER_NAME'];?>/images/titulna/hudba.png"><!-- front content -->
                        </div>
                        <div class="back">
                            <img src="http://<?echo $_SERVER['SERVER_NAME'];?>/images/titulna/hudba1.png"><!-- back content -->
                        </div>
                    </div>
                </div></a>
            </div>

Answer 1

One thing I have different than your code is:

.front {
 z-index: 2;
 /* for firefox 31 */
 transform: rotateY(0deg);
}