.wrap3 {
  margin-top:60px;
  perspective:1000px;
  overflow:hidden;
  perspective-origin:50% 50%;
/* Change this to adjust the 3d bar tilting */
  transform:rotateZ(0.00) rotateY(0.00);
}
.progress3 {
  height:100%;
  width:0%;
  padding:0;
  transition:width 2s ease;
  overflow:visible;
  text-align:center;
  color:#000;
  font-family:verdana;
  font-size:20px;
  white-space:nowrap;
  line-height:110px;
  text-shadow:1px 1px 2px #fff;
  border-right:solid 2px #444;
  background-size:50px 50px;
  
/* Blue stripes */
  background-image:linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%,#3399ff 50%,#3399ff 75%,#99ccff 75%,#99ccff 100%);
  animation:bganim 1s linear 2s infinite;
}
@keyframes bganim {
  to {
    background-position:120px;
  }
}
.cube3 {
  margin:auto;
  position:relative;
  height:120px;
  width:800px;
  transform-style:preserve-3d;
  animation:rotate 20s infinite linear;
}
.cube3 > div {
  position:absolute;
  box-sizing:border-box;
  height:100%;
  width:100%;
  
/*opacity:0.98;
  */
  border:solid 1px #eee;
}
.cube3.notrans > div {
  background-size:50px 50px;
  
/* Grey stripes */
  background-image:linear-gradient(135deg,#ddd 25%,#eee 25%,#eee 50%,#ddd 50%,#ddd 75%,#eee 75%,#eee 100%);
  animation:bganim 1s linear 2s infinite;
}
.cube3 > .left,
.cube3 > .right {
  height:120px;
  width:50px;
}
.front {
  transform:translateZ(60px);
}
.back {
  transform:translateZ(-60px) rotateX(180deg);
}
.top {
  transform:rotateX(-270deg) translateY(-60px);
  transform-origin:top center;
}
.bottom {
  transform:rotateX(270deg) translateY(60px);
  transform-origin:bottom center;
}
.left {
  transform:rotateY(270deg) translateX(-60px);
  transform-origin:center left;
}
.right {
  transform:rotateY(-270deg) translateX(60px) translateZ(450px);
  transform-origin:top right;
}
@keyframes rotate {
  100% { transform:rotateX(1turn); }
}