Я новичок в CSS, и меня попросили изменить некоторые существующие флип-карты, чтобы они переворачивались при нажатии, а не при наведении. Вот код.
.flip-card {
background-color: transparent;
width: 300px;
/*increase the card width and height by 20px*/
height: 300px;
perspective: 600px;
}
.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%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #ffca33;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
Я думал, что смогу добиться этого, изменив .flip-card:hover
на .flip-card:active
, но, похоже, это работает только в том случае, если я нажимаю на нее кнопку мыши и переворачиваю ее, как только я отпускаю. Я пробовал .flip-card:active.flip-card:hover
многое к тому же результату.
К сожалению нет. Вы не можете отслеживать события кликов с помощью CSS. Если вам нужны события кликов, используйте JavaScript.
document.getElementsByClassName("flip-card-front")[0]
.onclick = function(){
this.classList.toggle("active")
}
Обратите внимание, что эта форма вступит в силу только для первой флип-карты. Если вы хотите большего, вам нужен какой-то цикл или даже установка события onclick на весь экран и проверка, соответствует ли цель флип-карте.