*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
}


.threed {
  width: 60px;
  height: 60px;
  perspective: 2000px;
  margin: 0px auto 0;
}

.threed .cube {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: relative;
  animation: spin 6s infinite  cubic-bezier(.36,.55,.38,.86); animation-delay:.5s;
}
.threed .face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover; 
  background-image:url('../images/logo/UCS-LOGO.jpg');
  /*background-image: repeating-linear-gradient(0deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),repeating-linear-gradient(90deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));*/

}

.threed .top {
  transform: rotateX(90deg) translateZ(30px);
}
.threed .bottom {
  transform: rotateX(-90deg) translateZ(30px);
}

.threed .right {
  transform: rotateY(90deg) translateZ(30px);
}
.threed .left {
  transform: rotateY(-90deg) translateZ(30px);
}

.threed .front {
  transform: rotateX(0deg) translateZ(30px);
}
.threed .back {
  transform: rotateX(180deg) translateZ(30px) rotate(180deg);
}

@keyframes spin {
  0% {
    transform: rotateY(0deg) rotateX(0deg)    ; 
  }
  50% {
    transform: rotateY(80deg) rotateX(360deg)   ; 
  }
  100%{
    transform: rotateY(360deg) rotateX(0deg)   ; 
  }
}




.threed .cubes {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: relative;
  animation: spins 6s infinite  linear;
}
.threed .faces {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover; 
  /*background-image: repeating-linear-gradient(0deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),repeating-linear-gradient(90deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));*/
}

.threed .bottoms {
  transform: rotateX(-90deg) translateZ(30px);
  width: 70px; height: 70px; border-radius:50%;
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
  opacity:0.5;
  background-color: rgba(0,0,0,0.1);
}

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