<div id="wrapper">
<div id="image">
<div class="image i1"><img src="https://static.tildacdn.com/tild6461-6531-4734-a366-633639313662/Frame_1313970.jpg"></div>
<div class="image i2"><img src="https://static.tildacdn.com/tild6138-6463-4436-b061-346332326433/Frame_1313971.jpg"></div>
<div class="image i3"><img src="https://static.tildacdn.com/tild6639-6632-4766-b439-306361363637/Frame_1313972.jpg"></div>
<div class="image i4"><img src="https://static.tildacdn.com/tild3630-6538-4437-b839-313135663439/Frame_1313973.jpg"></div>
<div class="image i5"><img src="https://static.tildacdn.com/tild3366-3431-4262-b435-653465616563/Frame_1313974.jpg"></div>
<div class="image i6"><img src="https://static.tildacdn.com/tild3739-3435-4730-a631-303661393565/Frame_1313975.jpg"></div>
<div class="image i7"><img src="https://static.tildacdn.com/tild3333-3166-4239-a530-333066363566/Frame_1313976.jpg"></div>
<div class="image i8"><img src="https://static.tildacdn.com/tild3130-3461-4137-b339-303834653931/Frame_1313977.jpg"></div>
</div>
</div>

<style>
:root {
--ScaleWrapper: translate(-50%, -50%) scale(0.8); /*размер галлереи (работает по принципу scale)*/
--BorderRadius: 20px; /*радиус скругления углов*/
--ScaleWrapperPhone: translate(-50%, -50%) scale(0.4); /*размер галлереи (мобильная версия)*/
}
.tn-atom__img {
border-radius: 0px !important;
}
#wrapper {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
perspective: 5000;
-webkit-perspective: 5000;
width: 100%;
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(0) rotateZ(15deg);
-ms-transform: rotateX(15deg) rotateY(0) rotateZ(15deg);
-webkit-transform: rotateX(15deg) rotateY(0) rotateZ(15deg);
transform: rotateX(15deg) rotateY(0) 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>