C# ASP.Net DIV翻转表单中的CSS无效。_C#_Html_Asp.net_Css

C# ASP.Net DIV翻转表单中的CSS无效。

c# html asp.net css

C# ASP.Net DIV翻转表单中的CSS无效。,c#,html,asp.net,css,C#,Html,Asp.net,Css,我有一个CSS翻转，点击按钮就会激活。问题是，当我将它放在asp.net中时，翻转不起作用。我不知道asp.net表单是否自动刷新。如果您有任何帮助，我们将不胜感激 */The Css /* .flip-container { perspective: 1000px; } .flip-container.hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg);

我有一个CSS翻转，点击按钮就会激活。问题是，当我将它放在asp.net中时，翻转不起作用。我不知道asp.net表单是否自动刷新。如果您有任何帮助，我们将不胜感激

*/The Css /*

    .flip-container {
    perspective: 1000px;
}
    .flip-container.hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
}

它以下面的格式工作

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="NewUser.test" %>
<link rel="stylesheet" href="\_Layout\_Flip.css">
<link rel="stylesheet" href="\_Layout\_Layout.css">
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
<form id="form1" runat="server">
</form>
        <div class="flip-container" id="FLIPDIV">
            <div class="flipper">
                <div class="front">
                    Front
                    <button onclick="Flip()">Flip Me!</button>
                </div>
                <div class="back">
                    Back
                </div>
            </div>
        </div>

</body>
</html>
<script>
    function Flip() {
        var x = document.getElementById('FLIPDIV');
        x.classList.toggle('hover');
    }
</script>


正面
甩我！
返回
函数翻转（）{
var x=document.getElementById（'FLIPDIV'）；
x、 切换（'hover'）；
}

只要我在ASP.NET表单中尝试，flip就不起作用。我需要ASP的形式：文本框等

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="NewUser.test" %>
<link rel="stylesheet" href="\_Layout\_Flip.css">
<link rel="stylesheet" href="\_Layout\_Layout.css">
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
<form id="form1" runat="server">
        <div class="flip-container" id="FLIPDIV">
            <div class="flipper">
                <div class="front">
                    Front
                    <button onclick="Flip()">Flip Me!</button>
                </div>
                <div class="back">
                    Back
                </div>
            </div>
        </div>
</form>
</body>
</html>
<script>
    function Flip() {
        var x = document.getElementById('FLIPDIV');
        x.classList.toggle('hover');
    }
</script>


正面
甩我！
返回
函数翻转（）{
var x=document.getElementById（'FLIPDIV'）；
x、 切换（'hover'）；
}

我将假设表单在任何按钮按下时都会刷新。。但我不是专家，任何帮助都会令人惊讶：）

您的按钮位于表单中，并且没有定义类型属性。在这种情况下，它被假定为type=“submit”，因此每次单击它都会提交表单，而Flip（）函数无法显示任何可视更改

按以下方式更改按钮：

<button type="button" onclick="Flip()">Flip Me!</button>

翻转我！

现在应该可以了