*{outline:0px  solid #fff;}
:root{
  --size:360px;
}
body{
  background:white;
  padding:0;
  margin:0;
}
.perspective{
  perspective:1000px;
  perspective-origin:center;
  display: grid;
  place-items:center;
  height:100vh;
  overflow:hidden;
  position:relative;
}
.content-div{
   transform-origin: center;
  transform-style: preserve-3d;
  z-index:10;
  font-size: 5rem;
  text-transform:uppercase;
  // font-family: "Dancing Script", cursive;
  color:#fff;
  text-shadow:0px 0px 10px #000;
  pointer-events:none;
}
.img-cylinder{
  position:absolute;

  animation: animate 30s linear infinite;

  transform-origin: center;
  transform-style: preserve-3d;
  width:100%;
  height:100%;
  translate:0 -100%;
 
  
}
.image{
  position:absolute;
  left:50%;
  transform-origin: center;
  transform-style: preserve-3d;
  border-radius:10px;
  translate:-50%;
  --deg:18;
  //animation: deg 60s linear infinite alternate;
  transform: 
    rotateY(calc(var(--i) * calc(var(--deg) * 1deg))) 
    translatey(calc(calc(var(--i) / calc(1.11 * var(--deg))) * calc(var(--deg) * 5.83%))) 
    translateZ(calc(var(--size) * -3.3));
  /* added negetive translate Z to make backface into frontface and make it hidden*/
  transition:all .2s ease;
  width:var(--size);
  height:var(--size);
  background-image:var(--url);
  background-size:cover;
  background-attachment:fixed;
 
 backface-visibility:hidden;
}
@keyframes animate {
  0% {
    rotate: y 0deg;
  }
  100% {
    rotate: y 360deg;
  }
}
@keyframes deg {
  0% {
     
    transform: 
    rotateY(calc(var(--i) * calc(28 * 1deg))) 
    translatey(calc(calc(var(--i) / calc(1.11 * 28)) * calc(28 * 5.83%))) 
    translateZ(calc(var(--size) * -3.3));
  }
  100% {
     
    transform: 
    rotateY(calc(var(--i) * calc(18 * 1deg))) 
    translatey(calc(calc(var(--i) / calc(1.11 * 18)) * calc(18 * 5.83%))) 
    translateZ(calc(var(--size) * -3.3));
  }
}