Jquery для переворачивания карточек onClick, а не css hover rotate

Я новичок в JS и jquery, так что успокойтесь! lol .... Я использую 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-вращение при наведении курсора?

javascript jquery html css

10.09.2018 15:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 622

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Идеально, просто нужно немного изменить. вместо .hover в событии jquery используйте событие .click. Таким образом, вращение будет происходить по щелчку. хорошая работа!

— 10.09.2018 15:34

но ему нужно при наведении

— 10.09.2018 15:37

вот его просьба. "...... Сейчас у меня есть карточки, переворачивающиеся при наведении курсора, и это хорошо работает, но я думаю, что я бы предпочел, чтобы карточки переворачивались назад и вперед при щелчках мыши ......."

— 10.09.2018 15:38

10.09.2018 15:31