Платные

3Д фото галерею в движении для Тильды

Создаем 3Д фото галерею в движении для Тильды.


  1. Создаём T123 блок и помещаем в него стили из Кода 1.
  2. Создаем в Зеро блоке элемент HTML и вставляем туда Код 2.
  3. Меняем адреса изображения "https://static.tildacdn.com/tild6461-6531-4734-a366-633639313662/Frame_1313970.jpg" на свои.


КОД 1:

<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>

Код 2:

<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>