SOURCE

<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div></div>
<div class="hexagon second"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>

.hexagon,
.hexagon:before,
.hexagon:after {
    width: 87px;
    height: 50px;
    background: red;
}

.hexagon {
    margin-top: 25px;
    display: inline-block;
    transition: transform 1s;
}

.hexagon:before {
    content: "";
    display: block;
    position: absolute;
    transform: rotate(60deg)
}

.hexagon:after {
    content: "";
    display: block;
    position: absolute;
    transform: rotate(-60deg)
}

.second {
    margin-left: 46px;
}

.hexagon:hover {
    transform: rotate(30deg);
}