Ссылка
Даже если не меняя ксс, то именно
в мобильной версии сайта (а не в компьютерной) получается вот такая галемотья как на скриншоте, то есть, задняя сторона карточки именно на мобильнике не отражается при нажатии
<label class="c1">
<input type="checkbox" />
<div class="card">
<div class="front">What pronouce refer to yourself or to the speaker himself?</div>
<div class="back">Back</div>
</div>
</label>
label.c1 {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: inline-block;
width: 170px;
height: 300px;
cursor: pointer;
}
.c1 .card {
position: relative;
height: 100%;
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 600ms;
transition: all 600ms;
z-index: 20;
}
.c1 .card div {
position: absolute;
height: calc(100% - 40px);
width: calc(100% - 40px);
background: royalblue;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 2px;
padding: 20px;
}
.c1 .card .back {
background: #222;
color: #FFF;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
label.c1:hover .card {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.c1 input {
display: none;
}
.c1 :checked + .card {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
label.c1:hover :checked + .card {
transform: rotateY(160deg);
-webkit-transform: rotateY(160deg);
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
Даже если не менять ксс этой карточки, при чистом копировании на сайт получается та же шняга в мобильной версии. Помогите, пожалуйста!
Простой
