javascript - 翻转在 asp.net 中的 IE 和 Firefox 中不起作用

Question

我有带脚蹼的图表。这意味着前部(z-index:2)将是文本，后部将是图表。

如果我将鼠标悬停在前面，则会显示后面的部分图表(工作 chrome)。但同样不适用于 IE 和 Firefox。

请看附件中的图片和代码片段，如何解决这个问题？我感谢您的帮助。谢谢。

Flipper.css
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    /*border: 1px solid #ccc;*/
    border: none;
    height: auto;
    width: 100%;
    display: inline-block;
}

    .flip-container:hover .flipper,
    .flip-container.hover .flipper {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }


.flip-container, .front, .back {
    height: auto;
    width: 100%;
    padding: 0px;
    margin: 0px;
}


.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}


.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    align-content: center;
}

.front {
    z-index: 2;
}

.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    border: none;
}



.front .name {
    font-size: 2em;
    display: inline-block;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-transform: rotate(-0deg);
    -moz-transform: rotate(-0deg);
    -o-transform: rotate(-0deg);
    transform: rotate(-0deg);
    background-color: #cef8ff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cef8ff), to(#7fe0f8));
    background-image: -webkit-linear-gradient(top, #cef8ff, #7fe0f8);
    background-image: -moz-linear-gradient(top, #cef8ff, #7fe0f8);
    background-image: -ms-linear-gradient(top, #cef8ff, #7fe0f8);
    background-image: -o-linear-gradient(top, #cef8ff, #7fe0f8);
    background-image: linear-gradient(to bottom, #cef8ff, #7fe0f8);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cef8ff, endColorstr=#7fe0f8);
}

<div id="FlipMainId" class="flip-container" runat="server" style="height: 330px">
    <div id="Card1" class="flipper" runat="server">
        <div id="Card1Front" class="front" runat="server">
            <span class="name" style="height: 325px;">

                <table id="HCWF_Front" runat="server" border="0" style="text-align: center">
                    <tr>
                        <td>
                            <br />
                            <asp:Label ID="FrontLabel1" runat="server" Text="FrontLabel1" CssClass="FlipperheaderLabel"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td style="color: #777777; font-size: 12px; font-weight: normal; font-style: italic">
                            <asp:Label ID="FrontLabel2" runat="server" Text="FrontLabel2" CssClass=""></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="FrontLabel3" runat="server" Text="FrontLabel3" CssClass="FlipperLine1Label"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="FrontLabel4" runat="server" Text="FrontLabel4" CssClass="FlipperLine2Label"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="FrontLabel5" runat="server" Text="FrontLabel5" CssClass="FlipperLine2Label"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="FrontLabel6" runat="server" Text="FrontLabel6" CssClass="FlipperLine2Label"></asp:Label>
                        </td>
                    </tr>
                </table>
            </span>
        </div>
        <div id="Card1Back" class="back" runat="server" style="height: 330px">
            <table width="100%" border="0" runat="server">
                <tr>
                    <td align="right">
                        <Buttons...../>
                    </td>
                </tr>
                <tr>
                    <td>
                        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" 
                                              Height="300">
                            
                        </telerik:RadHtmlChart>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

Answer 1

I fixed this issue

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    /*border: 1px solid #ccc;*/
    height: auto;
    width: 100%;
}


    /* START: Accommodating for IE */
    .flip-container:hover .back, .flip-container.hover .back {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    .flip-container:hover .front, .flip-container.hover .front {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

/* END: Accommodating for IE */




.flip-container, .front, .back {
    height: auto;
    width: 100%;
    margin: 0px;
    padding: 0px;
}


.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}


.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(0deg);
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateY(0deg);
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateY(0deg);
    transition: 0.6s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    position: absolute;
    top: 0;
    left: 0;
    align-content: center;
}

.front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
}

.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    border: none;
}



.front .name {
    font-size: 2em;
    display: inline-block;
    font-family: helvetica, times, serif;
    padding-top: 10px;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    position: absolute;

    -webkit-transform: rotate(-0deg);
    -moz-transform: rotate(-0deg);
    -o-transform: rotate(-0deg);
    transform: rotate(-0deg);
    background-color: #cef8ff;
    
}