<style>
:root {
    --ScaleWrapper: scale(0.8); /*размер галлереи (работает по принципу scale)*/
    --BorderRadius: 20px; /*радиус скругления углов*/
    --ScaleWrapperPhone: scale(0.8); /*размер галлереи (мобильная версия)*/
}
.tn-atom__img {
    border-radius: 0px !important;
}

#wrapper {
    possition: absolute;
	right:0;
	z-index: 999;
    perspective: 5000;
    -webkit-perspective: 5000;
	width: 100%;
	margin: 20% 0%;
    perspective-origin: 50% 150px;
	-webkit-perspective-origin: 50% 150px;
    transition: perspective, 1s;
    -o-transition: -o-perspective, 1s;
    -moz-transition: -moz-perspective, 1s;
	-webkit-transition: -webkit-perspective, 1s;
	transform: var(--ScaleWrapper);
}
#image img {
    border-radius: var(--BorderRadius);
    width: 380px;
}

#image {
	margin: 0 auto;
	height: 300px;
	width: 400px;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-animation: rotate 35s infinite linear;
    -webkit-animation: rotate 35s infinite linear;
    animation: rotate 35s infinite linear;
}

.image {
	position: absolute;
	height: 100px;
	width: 400px;
    border-radius: var(--BorderRadius);
	text-align: center;
	font-size: 20em;
	color: #fff;
	
}

#image > .i1 {
  transform: translateZ(485px);
  -moz-transform: translateZ(485px);
  -o-transform: translateZ(485px);
  -ms-transform: translateZ(485px);
  -webkit-transform: translateZ(485px);
  
}
#image > .i2 {
  transform: rotateY(45deg) translateZ(485px);
  -moz-transform: rotateY(45deg) translateZ(485px);
  -o-transform: rotateY(45deg) translateZ(485px);
  -ms-transform: rotateY(45deg) translateZ(485px);
  -webkit-transform: rotateY(45deg) translateZ(485px);
}
#image > .i3 {
  transform: rotateY(90deg) translateZ(485px);
  -moz-transform: rotateY(90deg) translateZ(485px);
  -o-transform: rotateY(90deg) translateZ(485px);
  -ms-transform: rotateY(90deg) translateZ(485px);
  -webkit-transform: rotateY(90deg) translateZ(485px);
}
#image > .i4 {
  transform: rotateY(135deg) translateZ(485px);
  -moz-transform: rotateY(135deg) translateZ(485px);
  -o-transform: rotateY(135deg) translateZ(485px);
  -ms-transform: rotateY(135deg) translateZ(485px);
  -webkit-transform: rotateY(135deg) translateZ(485px);
}
#image > .i5 {
  transform: rotateY(180deg) translateZ(485px);
  -moz-transform: rotateY(180deg) translateZ(485px);
  -o-transform: rotateY(180deg) translateZ(485px);
  -ms-transform: rotateY(180deg) translateZ(485px);
  -webkit-transform: rotateY(180deg) translateZ(485px);
}
#image > .i6 {
  transform: rotateY(225deg) translateZ(485px);
  -moz-transform: rotateY(225deg) translateZ(485px);
  -o-transform: rotateY(225deg) translateZ(485px);
  -ms-transform: rotateY(225deg) translateZ(485px);
  -webkit-transform: rotateY(225deg) translateZ(485px);
}
#image > .i7 {
  transform: rotateY(270deg) translateZ(485px);
  -moz-transform: rotateY(270deg) translateZ(485px);
  -o-transform: rotateY(270deg) translateZ(485px);
  -ms-transform: rotateY(270deg) translateZ(485px);
  -webkit-transform: rotateY(270deg) translateZ(485px);
}
#image > .i8 {
  transform: rotateY(315deg) translateZ(485px);
  -moz-transform: rotateY(315deg) translateZ(485px);
  -o-transform: rotateY(315deg) translateZ(485px);
  -ms-transform: rotateY(315deg) translateZ(485px);
  -webkit-transform: rotateY(315deg) translateZ(485px);
}


  
  @keyframes rotate {
  0% {
    -moz-transform: rotateX(15deg) rotateY(15deg) rotateZ(15deg);
    -ms-transform: rotateX(15deg) rotateY(15deg) rotateZ(15deg);
    -webkit-transform: rotateX(15deg) rotateY(15deg) rotateZ(15deg);
    transform: rotateX(15deg) rotateY(15deg) rotateZ(15deg);
  }
  100% {
    -moz-transform: rotateX(15deg) rotateY(360deg) rotateZ(15deg);
    -ms-transform: rotateX(15deg) rotateY(360deg) rotateZ(15deg);
    -webkit-transform: rotateX(15deg) rotateY(360deg) rotateZ(15deg);
    transform: rotateX(15deg) rotateY(360deg) rotateZ(15deg);
  }
}


 @media screen and (max-width: 1024px) {
    #wrapper {
    perspective: 7000;
    -webkit-perspective: 5000;
    margin: 0%;
    height: 100%;
    }
    #image {
        position: relative;
        width: 320px;
        top: 30%;
    }
    img {
    width: 320px;
}

}
 @media screen and (max-width: 480px) {
    #wrapper {
    transform: var(--ScaleWrapperPhone);
    overflow: visible;
    margin: 0%;
    height: 100%;
    }
    #image {
        position: relative;
        width: 320px;
        top: 30%;
    }
    .image img {
    width: 330px;
}


}
</style>