Если щёлкнуть или коснуться элемент получает фокус.
Это можно тоже исползват в данном случае.
<style>
.one-post {
position: relative;
width: 24%;
height: 100px;
perspective: 1000px;
}
.one-post .side1 {
color: #343434;
background: #ffeeff;
transform-origin: 50% 50% 0;
transition: all 0.35s ease-in-out 0s;
}
.one-post .side2 {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
opacity: 0;
visibility: hidden;
backface-visibility: hidden;
transform: rotateY(-90deg);
color: #343434;
background: #eeeeff;
transition: none;
}
.one-post:focus .side1 {
transform: rotateY(90deg);
}
.one-post:focus .side2 {
opacity: 1;
visibility: visible;
transform: rotateY(0deg);
transition: all 0.35s ease 0.35s;
}
</style>
<div class="one-post" tabindex="0">
<div class="side1">bla bla bla</div>
<div class="side2">oops oops oops</div>
</div>
<div class="one-post" tabindex="0">
<div class="side1">bla bla bla</div>
<div class="side2">oops oops oops</div>
</div>