Javascript-форум - анимация по клику

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - анимация по клику (https://javascript.ru/forum/dom-window/58520-animaciya-po-kliku.html)

анимация по клику

Подскажите, пожалуйста.
Делаю 3d анимацию (чтоб слайдер переворачивался). Сделал ее в CSS по :hover

выглядит это примерно так:

Код:



<style>





.side1{

        padding:0 2vw;

        width:20vw;

        font-size:20px;

        color:#bebebe;

        display:block;

        background:lightblue;



}







.side2{

        position:relative;

        top:-300px;

        background:lightgreen;

        

        overflow:hidden;

        transform: rotateY(-180deg);

        margin:0 auto;

        backface-visibility:hidden;

}



.one-post{

        width:24vw;

        height: 500px;



        transform-style: preserve-3d;

        transition: transform 2s;

        

}



.one-post :hover .side1{

        margin: 0 auto;

        position:relative;

        overflow:hidden;

        padding:0;

        background:lightblue;

        white-space: nowrap;

        height:300px;



        backface-visibility:hidden;

        /*transform: rotateY(180deg);*/

        transition-duration:2s;

        transition-timing-function:linear;



        

        -webkit-transform-origin-x: 50%; 

        -webkit-transform-origin-y: 50%;

}



.one-post:hover .side2{

        



        transition-duration:1s;

        transition-timing-function:ease;

        





}



</style>





<div class="one-post">

    <div class = "side1">

     bla bla bla

     </div>



    <div class = "side2">

     oops oops oops

     </div>



</div>

но мне нужно сделать, чтоб это выполнялось не при наведении, а при клике на блок (в т.ч. чтоб и на телефоне нормально работало).

как это сделать?

В див .one-post добавь инпут с типом checkbox и тогда селокторы с :hover надо заменить на .one-post input:checked ~ .side1

Также можно скрыть сам инпут, а в нужное место вставить label с атрибутом for="ид чекбокса". и label стилизовать под кнопку

Если щёлкнуть или коснуться элемент получает фокус.
Это можно тоже исползват в данном случае.

<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>