ASP.Net DIV FLIP CSSが動作しません。

私はボタンをクリックするとアクティブになるCSSフリップがあります。問題は、私はasp.netでそれを配置するときですフリップは動作しません。私はasp.netフォームの自動ヘルプが払われるかどうか分かりません。ASP.Net DIV FLIP CSSが動作しません。

*/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); 
}

そして、それは以下の形式とすぐに、私はフリップが動作しないASP.NETフォームでそれをしようとして

<%@ 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のためのフォームを必要とする：テキストボックスなど。

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

は、私は、フォームがなどいずれかのボタンを押して上のリフレッシュのいくつかの缶を行うと仮定するつもりです..しかし、私は任意のヘルプは素晴らしいだろう何の専門家でありません:)

出典

2017-06-22 Jousa11

ボタンはフォーム内に配置され、タイプ属性は定義されていません。この場合は、type = "submit"とみなされます。クリックするたびにフォームが送信され、Flip（）関数は視覚的な変更を表示できません。

あなたのボタンをこのように変更し

：

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

それが動作するようになりました。

出典

2017-06-22 10:53:46

これは素晴らしい仕事でした。ありがとうございます:) – Jousa11

ASP.Net DIV FLIP CSSが動作しません。

答えて

関連する問題