0
У меня есть диаграмма с ластами. это означает, что передняя часть (z-index: 2) будет текстовой, а задняя часть будет диаграммой.Flipping не работает в IE и Firefox в asp.net
Если мышь на передней панели, тогда отобразится диаграмма задней части (рабочий хром). Но то же самое не работает IE & Firefox.
См. Прилагаемый pic & фрагмент кода, как его решить? Я ценю вашу помощь. Спасибо.
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>