img{
    max-width:100%;
    max-height:100%;
    box-sizing: border-box;
    
  }
  #containers img:hover {
     box-shadow: 0 0 15px #fffd;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
  }
  .containers {
    position: relative;
    width: 320px;
    perspective: 1000px;
  }
  
  .carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate360 60s infinite forwards linear;
  }
  .carousel__face {
    position: absolute;
    width: 30%;
    left: 10px;
    right: 10px;
    background-size: cover;
    display: flex;
    margin:auto;
  }
  
  span {
    margin: auto;
    font-size: 2rem;
  }
  
  
  .carousel__face:nth-child(1) {
    transform: rotateY(  0deg) translateZ(230px); }
  .carousel__face:nth-child(2) {
    transform: rotateY( 40deg) translateZ(230px); }
  .carousel__face:nth-child(3) {
   transform: rotateY( 80deg) translateZ(230px); }
  .carousel__face:nth-child(4) {
    transform: rotateY(120deg) translateZ(230px); }
  .carousel__face:nth-child(5) {
   transform: rotateY(160deg) translateZ(230px); }
  .carousel__face:nth-child(6) {
   transform: rotateY(200deg) translateZ(230px); }
  .carousel__face:nth-child(7) {
    transform: rotateY(240deg) translateZ(230px); }
  .carousel__face:nth-child(8) {
    transform: rotateY(280deg) translateZ(230px); }
  .carousel__face:nth-child(9) {
    transform: rotateY(320deg) translateZ(230px); }
  
  
  
  @keyframes rotate360 {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(-360deg);
    }
  }

  /*************** carousel bubu *******************/

 img{
   max-width: 100%;
   max-height:100%;
   box-sizing:border-box;
 }
  @keyframes scroll {
    0% {
      transform: translateX(0);
   }
    100% {
      transform: translateX(calc(-250px * 7));
   }
 }
  .slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 960px;
    margin-top: 5vh;
    margin-bottom: 5vh;
 
   
 }
  .slider::before, .slider::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    
    z-index: 2;
 }
  .slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
 }
  .slider::before {
    left: 0;
    top: 0;
 }
  .slider .slide-track {
    animation: scroll 50s linear infinite;
    display: flex;
    width: calc(150px * 14);
 }
  .slider .slide {
    height: 100px;
    width: 200px;
    margin-left:7vh;
 }