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>

在这里你的解决方案，当你点击带有$（this）的id时，你只是试图旋转按钮，你需要旋转div

Answer 3

你走了：

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

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

按钮单击时旋转CSS卡

3 个答案: