jquery to flip cards onClick rather than css hover rotate

Question

I am newbie JS and jquery so take it easy on me! lol....I'm using Bootstrap to make a layout using cards. As of now I have the cards flipping on a hover which works good but I think I would rather the cards flip back and forth on clicks. I have tried giving the cards a class of flip and using toggleclass but am not having any luck. Any advice would be greatly appreciated! Thanks!

 .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> 

Should I remove the hover rotate css?

Answer 1

You can do somthing like this..

 `.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>