旋轉按鈕上的CSS卡點擊

Question

我想通過點擊特定按鈕來旋轉CSS卡。

現在我可以通過點擊任何地方來旋轉它。

我應該如何改變它只在點擊按鈕？

我嘗試將javascript代碼（'.card'）更改爲（'#rotate'）並將該id添加到按鈕，但它不起作用。

 $('.card').click(function(){ 
 
      $(this).toggleClass('flipped'); 
 
     });

.animation { 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -ms-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 

 
.cardContainer 
 
{ 
 
    
 
    -webkit-transition: all .3s ease; 
 
    -moz-transition: all .3s ease; 
 
    -ms-transition: all .3s ease; 
 
    transition: all .3s ease; 
 

 
    
 
    /*depth of the elements */ 
 
    -webkit-perspective: 800px; 
 
    -moz-perspective: 800px; 
 
    -o-perspective: 800px; 
 
    perspective: 800px; 
 

 
    /*border: 1px solid #ff0000;*/ 
 
    padding-left: 1%; 
 
} 
 

 

 
.card 
 
{ 
 
    width: 99%; 
 
    height: 200px; 
 
    cursor: pointer; 
 
    
 
    /*transition effects */ 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition: -o-transform 0.6s; 
 
    transition: transform 0.6s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.card.flipped 
 
{ 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 
.card.flipped: 
 
{ 
 
} 
 

 
.card .front, 
 
.card .back { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    line-height: 60px; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 4em; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); 
 
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); 
 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); 
 
} 
 

 
.card .back { 
 
    width: 100%; 
 
    padding-left: 3%; 
 
    padding-right: 3%; 
 
    font-size: 16px; 
 
    text-align: left; 
 
    line-height: 25px; 
 
} 
 

 
.card .back { 
 
    background: #03446A; 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
}

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 

 
<div class="col-md-3 cardContainer"> 
 
        <div class="card red"> 
 
        <div class="front"><h3 class="cardTitle">Flip me!</h3></div> 
 
        <div class="back"> 
 
         <div class="content"> 
 
         <h3 class="cardTitle">Back side</h3> 
 
         <br/> 
 
         <p id="happy"></p> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 

 
<br> 
 
    <button type="button">Rotate card</button>

Answer 1

簡單地改變你的click處理程序：

$('button').click(function(){ 
    $('.card').toggleClass('flipped'); 
}); 

Answer 2

$('#rotate').click(function(){ 
 
       $(".card").toggleClass('flipped'); 
 
      });

.animation { 
 
     -webkit-transition: all 0.3s ease; 
 
     -moz-transition: all 0.3s ease; 
 
     -ms-transition: all 0.3s ease; 
 
     -o-transition: all 0.3s ease; 
 
     transition: all 0.3s ease; 
 
    } 
 

 
    .cardContainer 
 
    { 
 
     
 
     -webkit-transition: all .3s ease; 
 
     -moz-transition: all .3s ease; 
 
     -ms-transition: all .3s ease; 
 
     transition: all .3s ease; 
 

 
     
 
     /*depth of the elements */ 
 
     -webkit-perspective: 800px; 
 
     -moz-perspective: 800px; 
 
     -o-perspective: 800px; 
 
     perspective: 800px; 
 

 
     /*border: 1px solid #ff0000;*/ 
 
     padding-left: 1%; 
 
    } 
 

 

 
    .card 
 
    { 
 
     width: 99%; 
 
     height: 200px; 
 
     cursor: pointer; 
 
     
 
     /*transition effects */ 
 
     -webkit-transition: -webkit-transform 0.6s; 
 
     -moz-transition: -moz-transform 0.6s; 
 
     -o-transition: -o-transform 0.6s; 
 
     transition: transform 0.6s; 
 
     -webkit-transform-style: preserve-3d; 
 
     -moz-transform-style: preserve-3d; 
 
     -o-transform-style: preserve-3d; 
 
     transform-style: preserve-3d; 
 
    } 
 

 
    .card.flipped 
 
    { 
 
     -webkit-transform: rotateY(180deg); 
 
     -moz-transform: rotateY(180deg); 
 
     -o-transform: rotateY(180deg); 
 
     transform: rotateY(180deg); 
 
    } 
 
    .card.flipped: 
 
    { 
 
    } 
 

 
    .card .front, 
 
    .card .back { 
 
     display: block; 
 
     height: 100%; 
 
     width: 100%; 
 
     line-height: 60px; 
 
     color: white; 
 
     text-align: center; 
 
     font-size: 4em; 
 
     position: absolute; 
 
     -webkit-backface-visibility: hidden; 
 
     -moz-backface-visibility: hidden; 
 
     -o-backface-visibility: hidden; 
 
     backface-visibility: hidden; 
 
     box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); 
 
     -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); 
 
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); 
 
    } 
 

 
    .card .back { 
 
     width: 100%; 
 
     padding-left: 3%; 
 
     padding-right: 3%; 
 
     font-size: 16px; 
 
     text-align: left; 
 
     line-height: 25px; 
 
    } 
 

 
    .card .back { 
 
     background: #03446A; 
 
     -webkit-transform: rotateY(180deg); 
 
     -moz-transform: rotateY(180deg); 
 
     -o-transform: rotateY(180deg); 
 
     transform: rotateY(180deg); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- begin snippet: js hide: false --> 
 

 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 

 
<div class="col-md-3 cardContainer"> 
 
        <div class="card red"> 
 
        <div class="front"><h3 class="cardTitle">Flip me!</h3></div> 
 
        <div class="back"> 
 
         <div class="content"> 
 
         <h3 class="cardTitle">Back side</h3> 
 
         <br/> 
 
         <p id="happy"></p> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 

 
<br> 
 
    <button id="rotate" type="button">Rotate card</button>

這裏您的解決方案，你只是想旋轉按鈕，當你用$（本），您需要旋轉格

Answer 3

在這裏你去點擊ID：

$('.turnIt').click(function(){ 
$(".card").toggleClass('flipped'); 
}); 

http://codepen.io/damianocel/pen/QjZGjV