3D-визуализация: используйте HTML, CSS и JavaScript для создания крутых изображений-каруселей.
3D-визуализация: используйте HTML, CSS и JavaScript для создания крутых изображений-каруселей.

Предисловие

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

Текстовый контент

1. Понимание 3D-функций CSS.

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

  1. Свойства 3D-преобразования： transform: translate3d(x, y, z)：Реализовать перевод элементов в трехмерное пространство。 rotateX(angle), rotateY(angle), rotateZ(angle)：соответственно вокругXось、ось Y、Zосьвращатьэлемент。 rotate3d(x, y, z, angle)：указатьвращатьосьвекториперспективавращатьэлемент。 scale3d(x, y, z)：Пропорционально масштабирует размеры элемента в трех измерениях.。 skewX(angle), skewY(angle)：Хоть и не настоящий3Dвращать,Но в сочетании с другими преобразованиями можно смоделировать эффект трехмерного наклона. matrix3d()：использовать4x4Матрица представляет все3Dоперация преобразования。
  2. Перспективная недвижимость： perspective：Установить в родительском контейнере,Обеспечить эффект перспективы дочерним элементам,Имитируйте близкое, большое и далекое стереоскопическое зрение в реальном мире.。 perspective-origin：Определите положение перспективного вида。
  3. Свойство в стиле преобразования： transform-style: preserve-3d：Применяется к родительскому элементу,Позволяет своим внутренним подэлементам применять 3D-преобразования в соответствующих трехмерных пространствах.
  4. Свойство Backface-visibility： backface-visibility: hidden：Определяет, виден ли элемент, когда он перевернут назад.,Обычно используется при создании эффектов 3D-анимации, таких как переворачивание карт.

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

2. Создайте HTML-структуру трехмерной карусельной диаграммы.

Язык кода:html
копировать
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3Dкарусель</title>
    <link href="carousel.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="carousel-container">
        <!-- Источники изображений можно заменить изображениями из реальных проектов. -->
        <img class="carousel-item" src="images/1.jpeg">
        <img class="carousel-item" src="images/2.jpeg">
        <img class="carousel-item" src="images/3.jpeg">
        <img class="carousel-item" src="images/4.jpeg">
        <img class="carousel-item" src="images/5.jpeg">
    </div>
    <script src="carousel.js"></script>
</body>
</html>

вышеHTMLВ файле создается класс с именем.carousel-containerиз<div>каккарусельизконтейнер,и помести в него пять.carousel-itemкатегорияиз<img>элемент,Представляйте различные элементы изображений карусели соответственно.

3. Установите соответствующий стиль CSS.

Язык кода:css
копировать
html, body {
    margin: 0;
    padding: 0;
}

.carousel-item {
    width: 280px;
    height: 250px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 8px;
    transition: transform 1s ease-in-out;
}

.carousel-container {
    position: absolute;
    width: 800px;
    height: 250px;
    background-color: black;
    perspective: 800px;
    transform-style: preserve-3d;
}

Здесь сначала очистите всю страницуизмаржа, чтобы гарантироватькарусель Полноэкранный режим。Затем установите.carousel-itemдобрыйизстиль,Включая размер изображения, положение (по центру), анимацию перехода и т. д.,Обеспечивает плавное перемещение изображений в 3D-пространстве. в то же время,.carousel-containerКласс устанавливает абсолютное позиционирование、цвет фона и ключиз3Dсвойство,Чтобы представить эффект трехмерного стереоскопического вращения.

Четыре、проходитьcarousel.jsРеализация основных функций

Язык кода:javascript
копировать
const carouselImages = document.querySelectorAll(".carousel-item");
const imageCount = carouselImages.length;
let currentIndex = 0;
let timerId;

function initCarousel() {
    setupView();
    bindEvents();
    startAutoPlay();
}

initCarousel();

function setupView() {
    const halfLength = Math.floor(imageCount / 2);
    for (let i = 0; i < halfLength; i++) {
        let leftIndex = (currentIndex - i - 1 + imageCount) % imageCount;
        let rightIndex = (currentIndex + i + 1) % imageCount;

        carouselImages[leftIndex].style.transform = `translateX(${-150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(30deg)`;
        carouselImages[rightIndex].style.transform = `translateX(${150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(-30deg)`;
    }
    carouselImages[currentIndex].style.transform = `translateZ(300px)`;
}

function bindEvents() {
    for (let i = 0; i < imageCount; i++) {
        (function(index) {
            carouselImages[index].addEventListener('click', function () {
                currentIndex = index;
                setupView();
            });

            carouselImages[index].addEventListener('mouseenter', function () {
                clearInterval(timerId);
            });

            carouselImages[index].addEventListener('mouseout', function () {
                startAutoPlay();
            });
        })(i);
    }
}

function startAutoPlay() {
    timerId = setInterval(function () {
        currentIndex = (currentIndex + 1) % imageCount;
        setupView();
    }, 2000);
}

В разделе JavaScript,Сначала мы получаем все.carousel-itemэлементи посчитаем общую сумму。initCarousel()функция Отвечает за инициализациюкарусельиз Основные функции,включая звонкиsetupView()、bindEvents()иstartAutoPlay()функция。

  1. setupView()функция Индекс на основе выбранного в данный момент изображения,Динамическая настройка трехмерной трансформации левого и правого изображения.,Реализуйте эффект 3D-карусели.
  2. bindEvents()функция Добавьте клики к каждому изображениюсобытиеслушатель,Когда пользователь нажимает на картинку,Обновите отображаемый в данный момент индекс изображения и измените макет. в то же время,Также привязано наведение мыши на картинку.(onmouseenter)имышь прочь(onmouseout)событие,Используется для приостановки и возобновления автовоспроизведения.
  3. startAutoPlay()функция Достигнуто каждые2Автоматический переход к следующему изображению за считанные секундыиз Функция,и играть в цикле.

5. Демонстрация эффекта

Подвести итог

Приведенный выше код реализует базовый и привлекательный эффект 3D-карусели. Комплексно используя технологии HTML, CSS и JavaScript, мы можем создать яркий и креативный веб-интерактивный интерфейс. Хотя в этом примере показаны только базовые функции, разработчики могут дополнительно расширять и улучшать эффекты и функции этой 3D-карусели в соответствии с конкретными потребностями, чтобы сделать ее более подходящей для нужд приложений в различных сценариях.

boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода
©