Flip animation

by tujger

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="front">Front text</div>
  <div class="back">@Back text</div>
</div>

CSS

.flip-container {
	position:relative;
	width: 320px;
	height: 427px;
  /*perspective: 1000px;*/
}

.flip-container:hover .front {
  transform: rotateY(180deg);
}

.flip-container:hover .back {
  transform: rotateY(0);
}

.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
	transform-style: preserve-3d;
}

.front {
  background: green;
}

.back {
	transform: rotateY(180deg);
	background: yellow;
}