Как на сайте показывать псевдо-3д?

Ссылка скопирована
3D Веб-разработка
1 ответ

надо на сайте вертеть модель слева направо вокруг своей вертикальной оси
как это сделать без импорта 3д-моделей и библиотек типа three.js

я использую синему 4д
и блендер

какая js библиотека может показывать анимацию из последовательности кадров?
чтобы было возможно такое: загружаю в нее последовательность jpg и она крутит анимацию

или может проще вставлять элемент video? и им управлять программно

Дополнительно:

Lottie

  • А не проще гиф запилить?

  • надо на сайте вертеть модель

    сама должна ли вертеться или пользователем?

    • Ответы:

    часто просили клиенты, поэтому оформил это в библиотеку.
    https://github.com/its2easy/animate-images

    Хотя если не нужна интерактивность то проще зацикленное видео использовать

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Никита Орлов Ответ

    Для отображения псевдо-3D эффектов на веб-сайте можно использовать CSS-анимации и трансформации. Вот пример того, как можно создать псевдо-3D эффект с помощью CSS:

    1. Создайте контейнер для элементов, которые будут иметь псевдо-3D эффект:

    <div class="pseudo-3d-container">
  <div class="pseudo-3d-element"></div>
</div>

    <div class="pseudo-3d-container"> <div class="pseudo-3d-element"></div> </div>

    2. Примените стили к вашему контейнеру и элементу, чтобы создать псевдо-3D эффект:

    .pseudo-3d-container {
  perspective: 1000px;
}
 
.pseudo-3d-element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform: rotateY(45deg);
  transform-origin: 50% 50%;
  transition: transform 0.5s;
}
 
.pseudo-3d-element:hover {
  transform: rotateY(0deg);
}

    .pseudo-3d-container { perspective: 1000px; } .pseudo-3d-element { width: 100px; height: 100px; background-color: #3498db; transform: rotateY(45deg); transform-origin: 50% 50%; transition: transform 0.5s; } .pseudo-3d-element:hover { transform: rotateY(0deg); }

    3. В этом примере мы используем свойство `perspective` для контейнера, чтобы создать иллюзию глубины. Затем мы применяем `rotateY` к элементу, чтобы повернуть его на 45 градусов. При наведении курсора мы с помощью псевдокласса `:hover` возвращаем элемент в исходное положение.

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

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ SMM Из-за чего не сохраняется видео в мобильной программе blackmagic? 1 ответ