g/Wolf/public/css/less/partials/base.less

body{
  background-image: url('../img/cielo.jpg');
  background-size: cover;
  color: white;
  text-shadow: 0px 0px 30px rgba(150, 150, 150, 1);
}
header, footer{
  display: none;
}
#main-container {
  padding-top: @headerHeight;
}

#gui{
  position: absolute;
  bottom: 10px;
  left: 30px;
  padding: 15px;
  padding-top: 5px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 20;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.pointer{
    cursor: pointer;
}


.container-view {
  margin-top: 150px;
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 500px;
   /*-webkit-animation-name: rotacubo;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 12s;
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 60px 60px 0;
   transform: rotateZ(0deg) rotateX(45deg) rotateX(450deg);*/

}

#carousel, #map {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

#carousel figure {
  display: block;
  position: absolute;
  width: 121px;
  height: 121px;
  background-size: cover;
}


#carousel figure:nth-child(1) { 
  transform: translateZ(60px); 
  background-image: url('../img/pared1.jpg');
}
#carousel figure:nth-child(2) { 
  transform: rotateY(90deg)  translateZ(60px);
  background-image: url('../img/pared1.jpg');
}
#carousel figure:nth-child(3) { 
   transform: rotateY(90deg)  rotateX(90deg) translateZ(60px);
}
#carousel figure:nth-child(4) { 
  transform: rotateX(-90deg) translateY(120px) translateX(0px) translateZ(60px);
  background-image: url('../img/grass.jpg');
}
#carousel figure:nth-child(5) { 
  transform: rotateY(90deg)  translateZ(-60px); 
  background-image: url('../img/pared1.jpg');
}
#carousel figure:nth-child(6) { 
  transform: rotateX(-90deg) translateZ(60px); 
  background-image: url('../img/grass.jpg');
}
#carousel figure:nth-child(7) { 
  transform: rotateY(90deg) translateX(120px)  translateY(0px) translateZ(-60px); 
  background-image: url('../img/pared1.jpg');
}
#carousel figure:nth-child(8) { 
  transform: translateZ(-540px); 
  background-image: url('../img/pared1.jpg');
  background-size: 100% 100%;
}
#carousel figure:nth-child(9) { 
  transform: rotateY(90deg)  rotateX(90deg) translateX(120px)  translateZ(60px);
}
#carousel figure:nth-child(10) { 
  transform: rotateY(90deg) translateX(120px)  translateY(0px) translateZ(60px); 
  background-image: url('../img/pared1.jpg');
}

#carousel figure:nth-child(11) { 
  transform: rotateX(-90deg) translateY(240px) translateX(0px) translateZ(60px);
  background-image: url('../img/grass.jpg');
}
#carousel figure:nth-child(12) { 
  transform: rotateY(90deg)  rotateX(90deg) translateX(240px)  translateZ(60px);
}

#carousel figure:nth-child(13) { 
  transform: translateZ(60px) translateZ(-240px) translateX(120px); 
  background-image: url('../img/pared1.jpg');
}
#carousel figure:nth-child(14) { 
  transform: translateZ(60px) translateZ(-240px) translateX(-120px); 
  background-image: url('../img/pared1.jpg');
}

#carousel figure:nth-child(15) { 
  transform: rotateX(-90deg) translateY(240px) translateX(120px) translateZ(60px);
  background-image: url('../img/grass.jpg');
}
#carousel figure:nth-child(16) { 
  transform: rotateX(-90deg) translateY(240px) translateX(-120px) translateZ(60px);
  background-image: url('../img/grass.jpg');
}

#carousel figure:nth-child(17) { 
  transform: rotateX(-90deg) translateY(240px) translateX(120px) translateZ(-60px);
}
#carousel figure:nth-child(18) { 
  transform: rotateX(-90deg) translateY(240px) translateX(-120px) translateZ(-60px);
}

#carousel figure:nth-child(19) { 
  transform: rotateY(90deg) translateX(240px)  translateY(0px) translateZ(-180px); 
  background-image: url('../img/pared1.jpg');
}
#carousel figure:nth-child(20) { 
  transform: rotateY(90deg) translateX(240px)  translateY(0px) translateZ(180px); 
  background-image: url('../img/pared1.jpg');
}


#carousel figure:nth-child(21) { 
  transform: translateZ(-300px) translateX(120px); 
  background-image: url('../img/pared1.jpg');
}
#carousel figure:nth-child(22) { 
  transform: translateZ(-300px) translateX(-120px); 
  background-image: url('../img/pared1.jpg');
}


#carousel figure:nth-child(23) { 
  transform: rotateY(90deg)  rotateX(90deg) translateX(360px)  translateZ(60px);
}
#carousel figure:nth-child(24) { 
  transform: rotateX(-90deg) translateY(360px) translateX(0px) translateZ(60px);
  background-image: url('../img/grass.jpg');
}

#carousel figure:nth-child(25) { 
  transform: rotateY(90deg) translateX(360px)  translateY(0px) translateZ(-60px); 
  background-image: url('../img/pared1.jpg');
}
#carousel figure:nth-child(26) { 
  transform: rotateY(90deg) translateX(360px)  translateY(0px) translateZ(60px); 
  background-image: url('../img/pared1.jpg');
}

#carousel figure:nth-child(27) { 
  transform: rotateX(-90deg) translateY(480px) translateX(0px) translateZ(60px);
  background-image: url('../img/grass.jpg');
}

#carousel figure:nth-child(28) { 
  transform: rotateY(90deg) translateX(480px)  translateY(0px) translateZ(-60px); 
  background-image: url('../img/pared1.jpg');
}
#carousel figure:nth-child(29) { 
  transform: rotateY(90deg) translateX(480px)  translateY(0px) translateZ(60px); 
  background-image: url('../img/pared1.jpg');
}

#carousel #pika { 
  transform: translateX(120px) translateY(50px) translateZ(-240px); 
  background-image: url('../img/pika.gif');
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100px;
  height: 101px;
}

#carousel #cthulu { 
  transform: translateX(130px) translateY(45px) translateZ(-256px); 
  background-image: url('../img/cthulhu.gif');
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100px;
  height: 101px;
}

#carousel #smoke { 
  transform: translateX(145px) translateY(-90px)  translateZ(-300px); 
  background-image: url('../img/smoke.gif');
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100px;
  height: 101px;
}

#carousel #bob { 
  transform: translateX(-123px) translateY(-55px)  translateZ(-300px); 
  background-image: url('../img/bob.gif');
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100px;
  height: 101px;
}
#carousel #termi { 
  transform: translateX(-120px) translateY(35px) translateZ(-299px); 
  background-image: url('../img/terminator.gif');
  width: 100px;
  height: 40px;
}

#carousel #portal{ 
  transform: translateX(35px) translateY(32px) translateZ(-538px); 
  background-image: url('../img/Wormhole1.gif');
  background-size: 100% 100%;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  width: 50px;
  height: 50px;
  
  &.ng-enter {
    transition: 15s ease all;
      .opacity(0);
      &.ng-enter-active{
        .opacity(1);
      }
  }
}

@-webkit-keyframes rotacubo {
   /*0% {   
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }    
    100% {       
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }*/
}