ZorNet.Ru — сайт для вебмастера » HTML и CSS » Вращающейся 3D галерея изображений

Вращающейся 3D галерея изображений

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

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

Вращающаяся карусель 3D на CSS

Пример вращающуюся галерею с трехмерным преобразованием, подобным приведенному ниже экрану. Также при наведении изображение, вращение галереи будет остановлено, где изображение станет визуально манипулировать.

Следующий HTML и CSS используются для создания трехмерной вращающейся галереи на 100% по ширине, где просто убрали пробелы.

Установочный процесс:

HTML

Код

CSS

Код

.kovaduneg{
  margin: 4% auto;
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
}
#karusel_snimkov{
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: rotation 20s infinite linear;
}
#karusel_snimkov:hover{
  animation-play-state: paused;
}
#karusel_snimkov figure {
  display: block;
  position: absolute;
  width: 87%;
  height: 75%;
  left: 5px;
  top: 5px;
  background: #0e1429;
  overflow: hidden;
  border: solid 5px #182d3e;
}
#karusel_snimkov figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#karusel_snimkov figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#karusel_snimkov figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#karusel_snimkov figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#karusel_snimkov figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#karusel_snimkov figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#karusel_snimkov figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#karusel_snimkov figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#karusel_snimkov figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#karusel_snimkov figure:nth-child(10) { transform: rotateY(360deg) translateZ(288px);}

#karusel_snimkov img{
  -webkit-filter: grayscale(1);
  cursor: pointer;
  transition: all .5s ease;
  width:100%;
}
#karusel_snimkov img:hover{
  -webkit-filter: grayscale(0);
  transform: scale(1.2,1.2);
}

@keyframes rotation{
  from{
  transform: rotateY(0deg);
  }
  to{
  transform: rotateY(360deg);
  }
}

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

Но такие плагины уже по умолчанию станут увеличивать размер веб-страницы, что на прямую влияет на время загрузки интернет портала или блога.

Демонстрация

PS - при установки вы самостоятельно задаете ширину и высота блока, где выставлена картинка. Это можно создать с пробелами, что идет в материале по умолчанию, а также выставить 100% где будет по дизайну идти одна карусель без пробелов.

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

04 Ноября 2019 Загрузок: 2 Просмотров: 1095 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0