Как перевернуть изображение при клике javascript? - PullRequest
0 голосов
/ 27 января 2020

У меня есть изображение, которое переворачивается при наведении. Это мой код ниже. Код взят из w3schools.

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">

      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

Примечание:

  • Пожалуйста, запустите фрагмент кода и просмотрите его на полном экране.

  • При вставке кода здесь каким-то образом при наведении курсора изображение переворачивается, но
    возвращается в исходное состояние через несколько секунд. Однако этот код
    отлично работает в w3schools. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card

Как вы можете видеть, изображение при наведении переворачивается. Но мне нужно перевернуть изображение, только если я нажму на него.

Теперь я посмотрел вверх css, где происходит переворот. Это то, что я нашел

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

Теперь я посмотрел некоторые решения в Интернете и внес следующие изменения:

Изменено css для отражения, когда я добавляю класс hover

 .flip-card.hover .flip-card-inner {
      transform: rotateY(180deg);
  }

В javascript (или jquery в данном случае) именно так я обеспечиваю переворот

$('.flip-card').click(function() {
    $(this).toggleClass('hover');
});

Но тогда переворот не происходит при нажатии. Что я делаю не так?

Ответы [ 3 ]

1 голос
/ 27 января 2020

Вы должны определить, когда можно вызвать функцию щелчка.

Просто добавьте

$(document).ready(function() {  

  $('.flip-card').click(function() {
    $(this).toggleClass('hover');
  });

});

В этом случае это когда DOM загружен.

См. пример: https://jsfiddle.net/f5yn063s/

К вашему сведению: также не забудьте изменить: hover на .hover

0 голосов
/ 27 января 2020

возможно, вам следует использовать javascript часть в методе ready.

JS:

$(document).ready(function(){
    $('.flip-card').click(function(){
    $(this).toggleClass('hover');
  })
});

Работает. Проверьте js Fiddle, пожалуйста: https://jsfiddle.net/4yt7Lozc/2/

0 голосов
/ 27 января 2020

Добавьте class для ex .fliped к вашему css вместо .flip-card:hover .flip-card-inner и удалите hover и используйте toggleClass() для добавления / удаления этого класса в ваш элемент, и find(). Не забывайте, вам нужно использовать rotateY .fliped класс на .flip-card-inner, а не .flip-card

$('.flip-card').click(function() {
  $(this).find('.flip-card-inner').toggleClass('fliped')
});
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/*.flip-card:hover .flip-card-inner,*/
.fliped {
  transform: rotateY(180deg)!important;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">

      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

Также, если вы хотите добавить класс к .fliped, вы можете попробовать следующий пример:

$('.flip-card').click(function() {
  $(this).toggleClass('hover')
});
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}


/*.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg)!important;
}*/

.flip-card.hover .flip-card-inner {
  transform: rotateY(180deg)!important;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">

      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...