<div class="container">
  <div class="hexagone animate">
    
    <div class="top">
      <div class="face"></div>
      <div class="face"></div>
      <div class="face">top</div>
    </div>
    
    <div class="bottom">
      <div class="face"></div>
      <div class="face"></div>
      <div class="face">bottom</div>
    </div>

    <div class="side-faces">
      <div class="side">side 1</div>
      <div class="side">side 2</div>
      <div class="side">side 3</div>
      <div class="side">side 4</div>
      <div class="side">side 5</div>
      <div class="side">side 6</div>
    </div>

  </div>
</div>

body {
  background: #282828;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
}

.container {
  padding-top: 80px;
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

.hexagone {
  width: 200px;
  height: 200px;
  margin: auto;
  position: relative;
  transform-style: preserve-3d;
}

.side-faces {
  transform-style: preserve-3d;
}

.top, .bottom {
  position: absolute;
  line-height: 100px;
  text-align: center;
}

.face {
  position: absolute;
  width: 175px;
  height: 100px;
  background: #fff600;  
  box-shadow: inset  10px  0 10px -10px black,
    inset  -10px  0 10px -10px black;
}

.bottom .face {
  background: #ff5132;  
}

.face:nth-child(2) {
  transform: rotate(60deg);
}

.face:nth-child(3) {
  transform: rotate(120deg);
}

.side {
  width: 175px;
  height: 100px;
  position: absolute;
  background: linear-gradient(to right, rgba(255,81,50,1) 0%,rgba(255,246,0,1) 100%);
  text-align: center;
  line-height: 100px;
  box-shadow: 0 0 10px rgba(0,0,0,1) inset;
}

.top {
  transform: translateZ(87px);
}

.bottom {
  transform: rotateZ(60deg) rotateX(180deg) translateZ(87px);
}

.side:nth-child(1) {
  transform: rotateY(-90deg) translateZ(87px);
}

.side:nth-child(2) {
  transform: rotateY(-90deg) rotateX(60deg) translateZ(87px);
}

.side:nth-child(3) {
  transform: rotateZ(180deg) rotateY(-90deg) rotateX(-60deg) translateZ(87px);
}

.side:nth-child(4) {
  transform: rotateZ(180deg) rotateY(-90deg) translateZ(87px);
}

.side:nth-child(5) {
  transform: rotateZ(180deg) rotateY(-90deg) rotateX(60deg) translateZ(87px);
}

.side:nth-child(6) {
  transform: rotateY(-90deg) rotateX(-60deg) translateZ(87px);
}

@-webkit-keyframes spinningH {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(720deg) rotateY(360deg);
  }
}

@keyframes spinningH {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(720deg) rotateY(360deg);
  }
}

.animate {
  -webkit-animation : spinningH 12s infinite linear;
  -moz-animation    : spinningH 12s infinite linear;
  -o-animation      : spinningH 12s infinite linear;
  -ms-animation     : spinningH 12s infinite linear;
  animation         : spinningH 12s infinite linear;
}

/*

Pure CSS 3D Hexagon

Works on FF and Chrome. Doesn't work on IE.

Top/Bottom Hexagon: i used 3 rotated divs.
  Pros:  -   exact hexagon shape
         -   box-shadow property
  Cons:  -   not very easy to control the box-shadow effect
  
I'm more than happy to know possible improvements!!!

*/