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

[dimasheff]

Подскажите, пожалуйста.
Делаю 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>

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

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

[sanmihan]

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

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

[Malleys]

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

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