Как создать вращающуюся 3D-галерею изображений используя HTML и CSS

14.12.2024, 22:21
1 просмтотр
(0)
Как создать вращающуюся 3D-галерею изображений используя HTML и CSS

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

В архиве находится:

  • Все демонстрационные изображения, 
  • Исходные файлы HTML, 
  • Исходные файлы CSS, 
  • Иконки шрифтов, 
  • Файлы библиотеки и плагинов, 

HTML КОД:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Rotating Image Gallery</title>

    <!--css file-->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <span class="slide" style="--i: 1"
        ><img src="images/img1.jpg" alt=""
      /></span>
      <span class="slide" style="--i: 2"
        ><img src="images/img2.jpg" alt=""
      /></span>
      <span class="slide" style="--i: 3"
        ><img src="images/img3.jpg" alt=""
      /></span>
      <span class="slide" style="--i: 4"
        ><img src="images/img4.jpg" alt=""
      /></span>
      <span class="slide" style="--i: 5"
        ><img src="images/img5.jpg" alt=""
      /></span>
      <span class="slide" style="--i: 6"
        ><img src="images/img6.jpg" alt=""
      /></span>
      <span class="slide" style="--i: 7"
        ><img src="images/img7.jpg" alt=""
      /></span>
      <span class="slide" style="--i: 8"
        ><img src="images/img8.jpg" alt=""
      /></span>
      <span class="slide" style="--i: 9"
        ><img src="images/img9.jpg" alt=""
      /></span>
      <span class="slide" style="--i: 10">
        <img src="images/img10.jpg" alt="" />
      </span>
    </div>
  </body>
</html>

CSS КОД:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  position: relative;
  width: 150px;
  height: 200px;
  transform-style: preserve-3d;
  animation: rotateAnim 20s linear infinite;
}

@keyframes rotateAnim {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

.wrapper .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 5px;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(280px);
}

.wrapper .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  -webkit-box-reflect: below 0px
    linear-gradient(transparent, transparent, #0005);
}
Добавить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив
x