ЗАПОЛНИТЬ БРИФ
МОДИФИКАЦИЯ

Как сделать 3D галерею на Tilda

Делаем вращающейся 3D галерею в ZeroBlockе всего за 5 минут

Как это сделано?

1. Создаём ZeroBlock
2. Создаём в зеро блоке HTML
3. Добавляем код внутрь этого HTML и прописываем в коде свои ссылки
4. Добавляем второй код в блок Т123, публикуем и готово!

В коде замените 8 ссылок:
Именно вот эту часть: https://static.tildacdn.com/tild6263-3837-4432-a637-653464386539/__1.jpg

ВАЖНО!
Для удобства я создаю 8 фоток в зеро блоке, в них загружаю свои фото, потом копирую их ссылки и вставляю в код. Сами фото группирую и скрываю (не удаляйте их, а именно скрывайте это важно). И ещё важный момент, все фото должны быть одного размера! Если вы их грузите в зеро блок, то в шейп грузить не надо (этот вариант фото не обрежет) загружайте их только в image, их можно обрезать в фигме или в фотошопе, кому как удобно.

Этот код вставить внутрь HTML в зеро блоке


<div id="wrapper"><div id="image">
    
<div class="image i1"><img src="https://static.tildacdn.com/tild6263-3837-4432-a637-653464386539/__1.jpg"></div>
<div class="image i2"><img src="https://static.tildacdn.com/tild3561-6465-4539-a564-373438646330/photo.png"></div>
<div class="image i3"><img src="https://static.tildacdn.com/tild3732-6330-4166-a333-616336373264/jhk.png"></div>
<div class="image i4"><img src="https://static.tildacdn.com/tild6433-3966-4036-b336-633233376461/__1.png"></div>
<div class="image i5"><img src="https://static.tildacdn.com/tild3162-6131-4463-a233-653730343231/__1.png"></div>
<div class="image i6"><img src="https://static.tildacdn.com/tild3565-6130-4838-a234-663334633564/1_1.png"></div>
<div class="image i7"><img src="https://static.tildacdn.com/tild3962-3635-4538-b861-636134333763/_1.jpg"></div>
<div class="image i8"><img src="https://static.tildacdn.com/tild6663-6334-4237-a465-646364656536/__1.jpg"></div>
</div>

</div>

Этот код вставить в блок Т123

Скопировать
Скопированно

<style>
:root {
    --ScaleWrapper: scale(0.8); /*размер галлереи (работает по принципу scale)*/
    --BorderRadius: 20px; /*радиус скругления углов*/
}
.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);
}
img {
    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 15s infinite linear;
    -webkit-animation: rotate 15s infinite linear;
    animation: rotate 15s 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);
}

img {
  border-radius: 25px; }
  
  @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 {
    perspective: 300;
    -webkit-perspective: 300;
    overflow: visible;
    margin: 0%;
    height: 100%;
    }
    #image {
        position: relative;
        width: 320px;
        top: 30%;
    }
    .image img {
    width: 330px;
    transform: scale(-1, 1);
}


}
</style>

Что-то не получается?

Спросите у меня в чате ниже, я с удовольствием вам помогу!
Made on
Tilda