Управление файлами cookie

Настройки файлов cookie

Файлы cookie, необходимые для корректной работы сайта, всегда включены.

Другие файлы cookie можно настроить.

Основные файлы cookie

Всегда включен.
Эти файлы cookie необходимы для того, чтобы вы могли пользоваться веб-сайтом и его функциями. Их нельзя отключить. Они устанавливаются в ответ на ваши запросы, такие как настройка параметров конфиденциальности, вход в систему или заполнение форм.

Аналитические файлы cookie

Disabled

Эти файлы cookie собирают информацию, чтобы помочь мне понять, как используется мой веб-сайт или насколько эффективны мои маркетинговые кампании, или чтобы помочь мне настроить мой веб-сайт под вас. Смотрите список используемых мною аналитических файлов cookie здесь.

Файлы cookie для рекламы

Disabled

Эти файлы cookie помогают рекламным платформам анализировать ваше поведение в интернете, чтобы показывать вам более релевантную рекламу или ограничивать количество повторяющихся объявлений. Собранные данные могут передаваться партнёрам в digital-маркетинге.

Полный список используемых рекламных cookie можно посмотреть здесь

МОДИФИКАЦИЯ

Как сделать 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>

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

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