rotate3d - CSS 3d-transform + Gradient

HTML

<div class="container">
<div id="bk"></div>
<div id="bk"></div>
<div id="bk"></div>
<div id="bk"></div>
<div id="bk"></div>
<div id="bk"></div>
<div id="bk"></div>
<div id="bk"></div>
<div id="bk"></div>
<div id="bk"></div>
<div id="bk"></div>
</div>

CSS

.container {
  width:100%;
  height: 100%;
}
#bk {
    color: white;
    box-shadow: 2px 2px 5px #a8a8aa;/* #3D352A */
    width: 50px;
    height: 800px;
    background-color: #a8a8aa;
    font-size: 20px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    display:inline-block;
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg); /* For Safari */
    background: -webkit-linear-gradient(270deg, #e2e2e4, #78787b);
    background: -moz-linear-gradient(270deg, #e2e2e4, #78787b);
    background: -o-linear-gradient(270deg, #e2e2e4, #78787b);
    background: linear-gradient(270deg, #e2e2e4, #78787b); 
}

.container:hover #bk {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}