Локальная навигация по индексному HTML-коду, содержащему карусель 3D-искусства. ⇐ CSS

[Anonymous]

Каждый раз, когда я запускаю программу в реальном времени из Visual Code, она работает так, как задумано. У меня проблема заключается в локальном запуске кода при переходе из индексного файла в папке с файлами.
Я уверен, что проблема связана с индексным файлом, но я не могу найти проблема. Программа должна отображать 3D-карусель на html-странице с изображениями ниже.
Проблема заключается в том, что я запускаю индексный файл в папке компьютера, чтобы проверить, запускается ли он в папке компьютера. браузер. До этого я запускал код в реальном времени с помощью визуального кода, и программа работала, как и планировалось. Я предполагал, что это сработает, если я запущу индексный файл после импорта файлов на сервер. Несмотря на это, на html-странице отображается только одно увеличенное неподвижное изображение, выходящее за рамки пропорций.
Я не могу точно выделить то, что мне не удалось включить, несмотря на исследование этой проблемы по похожим публикациям. . Очевидно, мне чего-то не хватает на главной странице.

[text](http://hccwebdev.net
< div class="snippet">

Код: Выделить всё

 var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 45; } else { angle = angle - 45; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
}

Код: Выделить всё

div#carousel {
perspective: 1200px;
background: #100000;
padding-top: 10%;
padding-bottom: 30%;
font-size:0;
margin-bottom: 3rem;
overflow: hidden;
}
figure#spinner {
transform-style: preserve-3d;
height: 300px;
transform-origin: 50% 50% -500px;
transition: 1s;
}
figure#spinner img {
width: 40%; max-width: 425px;
position: absolute; left: 30%;
transform-origin: 50% 50% -500px;
outline:1px solid transparent;
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg);
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span {
color: #fff;
margin: 5%;
display: inline-block;
text-decoration: none;
font-size: 12rem;
transition: 0.6s color;
position: relative;
margin-top: -18rem;
border-bottom: none;
line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }

Код: Выделить всё

3D Carousel






[img]Seed of the Haze.jpg[/img]
[img]Daughter of the Haze.jpg[/img]
[img]Enchantress of the Haze.jpg[/img]
[img]Primeval Ruins.jpg[/img]
[img]Ruins.jpg[/img]
[img]Fish Creature.jpg[/img]
[img]Fish Creature.png[/img]
[img]Leviathan Hunter.jpg[/img]




<
>

/~scripting130/p7/index.html)

Подробнее здесь: https://stackoverflow.com/questions/787 ... t-carousel