Я пытаюсь сделать флип-карту, которая переворачивается при нажатии (т.е. не :hover или :activate). Никаких излишеств пока (кроме тени, которая была ответом на вызов друзей), только базовый функционал. Я следил за различными полезными сообщениями об этом подходе, но не могу заставить его работать. Кто-нибудь может увидеть, что я делаю не так, пожалуйста?
РЕДАКТИРОВАТЬ: Извините, после прочтения других сообщений здесь остался какой-то старый код из моей работы. Код флажка теперь удален.
EDIT2: проблема решена. Нужен «готовый» метод jQuery, добавленный в код ниже.
Flip Card Test
$(document).ready(function(){
$('.card').click(function(e){
e.preventDefault();
$(this).toggleClass('flipped');
})
})
.card {
width: 300px;
height: 300px;
margin: 25px;
perspective: 1000px;
cursor: pointer;
transition: transform 1s;
transform-style: preserve-3d;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
.card.flipped {
transform: rotateY( 180deg );
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
padding: 25px;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.card-back {
transform: rotateY(180deg);
}
The front
The back
Подробнее здесь: https://stackoverflow.com/questions/687 ... d-by-click
