<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
color: #666;
font-weight: normal;
margin: 0;
padding: 0;
background: #eeeeee;
}
h2 {
background: #666;
color: #fff;
text-align: center;
margin: 0 0 5% 0;
padding: 0.5em;
}
.cardBox {
float: left;
font-size: 1.2em;
margin: 1% 0 0 1%;
perspective: 800px;
transition: all 0.4s ease 0s;
width: 20%;
}
.cardBox:hover .card {
transform: rotateY(180deg);
}
.card {
background: #666666;
cursor: pointer;
height: 250px;
transform-style: preserve-3d;
transition: transform 0.5s ease 0s;