У меня есть изображение, которое переворачивается при наведении. Это мой код ниже. Код взят из 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>
Примечание:
Как вы можете видеть, изображение при наведении переворачивается. Но мне нужно перевернуть изображение, только если я нажму на него.
Теперь я посмотрел вверх 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');
});
Но тогда переворот не происходит при нажатии. Что я делаю не так?