javascript - jquery 翻转卡片 onClick 而不是 css 悬停旋转

Question

我是 JS 和 jquery 新手，所以请放轻松!大声笑....我正在使用 Bootstrap 来使用卡片进行布局。到目前为止，我的卡片在悬停时会翻转，效果很好，但我想我更希望卡片在点击时来回翻转。我试过给卡片一个翻转类并使用 toggleclass 但我没有任何运气。任何建议将不胜感激!谢谢!

.book-card {
  position: relative;
  box-shadow: 5px 15px 50px #aaa;
  max-width: 420px;
  overflow: hidden;
  transition: all .8s;
}

.rotate {
  perspective: 100rem;
}

.back {
  position: absolute;
  top: -100%;
  background: #fefefe;
  height: 100%;
  width: 100%;
  opacity: 0;
  user-select: none;
  pointer-events: none;
  transform: rotateY(180deg);
  transition: top .8s, opacity .4s;
}

.back-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.back-content p {
  color: #111517;
}

.back-content h1 {
  font-size: 30px !important;
}

.back-content h3 {
  font-size: 25px !important;
}

.back-content a {
  font-size: 30px;
  padding-left: 3px;

}

.rotate:hover .book-card {
  transform: rotateY(180deg);
}

.rotate:hover .back {
  opacity: 1;
  top: 0;
  user-select: auto;
  pointer-events: auto;
}

<div class="col-xl-3 col-lg-4 col-sm-8 rotate">
  <div class="card text-center mb-3 book-card mx-auto">
    <div class="card-header">
      <h4 class="font-weight-light">TBD - <em>HRG</em></h4>
    </div>
    <div class="card-body">
      <img src="/images/girl-two.png" class="img-fluid rounded">
    </div>
    <div class="card-footer">
      Portland, ME
    </div>
    <div class="back">
      <div class="back-content">
        <h1 class="text-uppercase font-weight-light font-italic">Portland, ME</h1>
        <h3 class="mb-3">4:45pm</h3>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos veniam</p>
        <a href="https://www.linkedin.com/company/masspay" target="_blank" class="hvr-icon-grow "><img src="images/linklong.png"></a>
      </div>
    </div>
  </div>
</div>

我应该删除悬停旋转 css 吗？

Answer 1

你可以这样做......

 `.flip .card .back {
    padding-top: 10%;
   -webkit-transform: rotatey(-180deg);
      transform: rotatey(-180deg);
    position: absolute;
 }`

$('.flip').click(function(){ //hover  can be used
        $(this).find('.card').toggleClass('flipped');

 });

body{
  padding-top:50px;
  background: #555;
}
.flip {
  -webkit-perspective: 800;   
          perspective: 800;
        position: relative;
        text-align: center;
}
.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
          transform: rotatey(-180deg);
}
.flip .card {
    width: 270px;
    height: 178px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
    background-color: #fff;
   
}
.flip .card .face {
  -webkit-backface-visibility: hidden ;
    backface-visibility: hidden ;
   z-index: 2;
}
.flip .card .front {
   position: absolute;
   width: 270px;
   z-index: 1;
}
.flip .card .front img{
  width: 270px;
  height: 100%;
}
.flip .card .img {
   position: relaitve;
   width: 270px;
   height: 178px;
   z-index: 1;
   border: 2px solid #000;
}
.flip .card .back {
  padding-top: 10%;
  -webkit-transform: rotatey(-180deg);
          transform: rotatey(-180deg);
  position: absolute;
}
.inner{
  margin:0px !important;
  width: 270px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container">
<div class="row">
<div class="col-sm-3">
      <div class="flip">
        <div class="card"> 
          <div class="face front"> 
            <div class="inner">   
              <img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
            </div>
          </div> 
          <div class="face back"> 
            <div class="inner text-center"> 
              <h3>Improved efficiency through automation</h3>
              <button type="button" class="btn btn-default">Know More</button>
            </div>
          </div>
        </div>	 
      </div>
    </div>
  <div class="col-sm-3">
      <div class="flip">
        <div class="card"> 
          <div class="face front"> 
            <div class="inner">   
              <img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
            </div>
          </div> 
          <div class="face back"> 
            <div class="inner text-center"> 
              <h3>Improved efficiency through automation</h3>
              <button type="button" class="btn btn-default">Know More</button>
            </div>
          </div>
        </div>	 
      </div>
    </div>
  <div class="col-sm-3">
      <div class="flip">
        <div class="card"> 
          <div class="face front"> 
            <div class="inner">   
              <img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
            </div>
          </div> 
          <div class="face back"> 
            <div class="inner text-center"> 
              <h3>Improved efficiency through automation</h3>
              <button type="button" class="btn btn-default">Know More</button>
            </div>
          </div>
        </div>	 
      </div>
    </div>
  <div class="col-sm-3">
      <div class="flip">
        <div class="card"> 
          <div class="face front"> 
            <div class="inner">   
              <img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
            </div>
          </div> 
          <div class="face back"> 
            <div class="inner text-center"> 
              <h3>Improved efficiency through automation</h3>
              <button type="button" class="btn btn-default">Know More</button>
            </div>
          </div>
        </div>	 
      </div>
    </div>
  </div>
  </div>