Question

我有一个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>

只要我在ASP.NET表单中尝试它，翻转就不起作用了。我需要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>

我将假设表格在按任何按钮等时可以刷新一些。但我不是任何专家，任何帮助都会令人惊叹:)

Answer 1

您的按钮位于表单中，并且未定义任何类型属性。在这种情况下，它被假定为type =＆＃34; submit＆＃34;，因此每次点击它只是提交你的表单，而Flip（）函数不能显示任何视觉变化。

以这种方式更改按钮：

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

现在应该可以了。

ASP.Net DIV FLIP CSS表单不起作用。

1 个答案: