CSS div翻轉第一次工作

我有一個div來翻動，只要我點擊一個按鈕。每次點擊前後都應該切換。它僅適用於第一次點擊。CSS div翻轉第一次工作

HTML：

<div style="margin-left:100px;padding-top:100px;"> 
    <div class="vertical flip-container"> 
     <div class="flipper" id='flipper'> 
      <div class="front"> 
       Front Side 
      </div> 
      <div class="back"> 
       Back Side 
      </div> 
     </div> 
    </div> 
    <button onclick="document.getElementById('flipper').style.transform = 'rotateX(-180deg)'">Tap the button</button> 
</div>

CSS：

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 400px; 
} 

.flip-container, .front, .back { 
    width: 220px; 
    height: 280px; 
} 

.back { 
    width: 220px; 
    height: 200px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    backface-visibility:hidden; 
    -webkit-backface-visibility:hidden; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 1; 
    background-color:red; 
    animation: toBack 0.3s linear normal forwards; 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateX(-180deg); 
    background-color:green; 
    animation: toFront 0.3s linear normal forwards; 
} 
.vertical.flip-container { 
    position: relative; 
} 

@keyframes toBack { 
    0% {z-index:0;} 
    100% {z-index:1;} 
} 
@keyframes toFront { 
    0% {z-index:1;} 
    100% {z-index:0;} 
} 
.vertical.flip-container .flipper { 
    transform-origin: 100% 100px; /* half of height */ 
}

我新的CSS3。請幫我找到問題。

來源

2014-09-11 Gautam Kumar

你只有將它設置爲'-180'（第一次點擊後），一旦它在'-180'處，它將不再移動。你需要每次增加180度，或者第一次做'-180'，第二次做'0'等。 – naththedeveloper 2014-09-11 12:06:53

除了上面的評論，最好使用CSS類進行轉換並在每次按下按鈕時打開和關閉它。 – Harry 2014-09-11 12:09:34

這裏是與jQuery

Jquery的一個解決方案：

$(document).ready(function() { 

    $("#rotate").click(
     function() { 
      $("#flipper").toggleClass("back"); 
     }    
    ); 
});

HTML（我只加的ID的按鈕）

<div style="margin-left:100px;padding-top:100px;"> 
    <div class="vertical flip-container"> 
     <div class="flipper" id='flipper'> 
      <div class="front">Front Side</div> 
     <div class="back">Back Side</div> 
    </div> 
</div> 
<button id="rotate">Tap the button</button>

甲nd這裏是一個工作fiddle

來源

2014-09-11 17:09:31

CSS div翻轉第一次工作

回答

相關問題