Вот пример кода галереи CSS 3D-изображений:

HTML-код:

<div class="gallery">
  <figure class="gallery-item">
    <img src="image1.jpg" alt="Image 1">
  </figure>
  <figure class="gallery-item">
    <img src="image2.jpg" alt="Image 2">
  </figure>
  <figure class="gallery-item">
    <img src="image3.jpg" alt="Image 3">
  </figure>
</div>

CSS-код:

center;
align-items: center;
перспектива: 1000 пикселей;

.gallery-item {
ширина: 200 пикселей;
высота: 200 пикселей;
маржа: 10 пикселей;
Transform-style: save-3d;
переход: трансформация 0,5 с;

.gallery-item:hover {
Transform: RotateY(180deg);
}
.gallery-item img {
ширина: 100%;
высота: 100%;
соответствие объекта: обложка;

Этот код создает простую галерею 3D-изображений CSS. Класс galleryприменяется к контейнеру div, и каждое изображение оборачивается элементом рисунка с классом gallery-item. При наведении курсора на изображение оно поворачивается вокруг оси Y на 180 градусов.