Итак, Выше показанно, как будет выглядеть визитка свадебного агентства. Теперь можно разбраться по-подробнее.

Для начала создадим необходимую html верстку:

 <div class="inner">
	<div class="flipper">
	 <div class="front">
		<i>cc</i>
			<div class="header">
			<h3>Wedding Agency</h3>
			</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="back">
<h3> About Us</h3>
<div class="line"></div>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur
 aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
</div>
</div>
</div>
 

Итак, Сначала дадим глубину контейнеру inner

 .inner{
   perspective: 1200px;
 }
 

Теперь обратим внимание на контейнер Flipper. Из названия следует, что именно он будет переворачиваться при наведении. Для этого пропишем ему несколько свойств.

.inner:hover .flipper{
 transform: rotatey(180deg);
 position: relative;
}
 

Дадим ему относительно позиционирование, чтобы далее позиционировать все внутри него абсолютно.

Теперь приступим к оформлению передней и задней части визитки.

Сначала зададим общие свойства, такие как размер и позиционирование.

.front, .back{
width: 320px;
text-align:center;
backface-visibility:hidden;
width: 100%;
height: 100%;
box-sizing: border-box;
position:absolute;
top:0px;
left:0px;
 }
 

backface-visibility:hidden нужно для того, чтобы показывалась лишь передняя сторона визитки.

Перейдем к задней части, так как передняя часть не нуждается в особых свойствах.

Так как задняя сторона должна отображаться зеркально припишем ей

.back{
  transform: rotatey(-180deg);
 }