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

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

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