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

Javascript css在不同浏览器中翻转卡片,javascript,php,html,css,Javascript,Php,Html,Css,嗨,我需要使翻转卡片在不同的浏览器效果,但它只能正确地工作在chrome和opera…在不同的浏览器中,它不会改变图像或改变图像,但不会翻转。。。你能帮助我吗??这是我的CSS代码: .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-trans

嗨,我需要使翻转卡片在不同的浏览器效果,但它只能正确地工作在chrome和opera…在不同的浏览器中,它不会改变图像或改变图像,但不会翻转。。。你能帮助我吗??这是我的CSS代码:

.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;
}
这是我的Html代码:

<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>

与您的代码不同的是:

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

它适用于firefox thx:但我也需要它适用于safari和explorer:我现在不在我的电脑前,但你能用-moz转换和-webkit转换做同样的事情吗?它不会改变任何事情我的代码似乎和你我的一样。你在使用Safari和IE的更新版本吗?你的网站在我的Safari中运行良好。8.0.3和IE 11.0.9600.17501