ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный 3D слайдер-карусель на CSS3

Адаптивный 3D слайдер-карусель на CSS3

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

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

Так примерно смотрится с планшете или смартфона:

Установка:

HTML

Код

CSS

Код

.header{
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #252525;
}
.design-kides{
  width: 30vh;
  perspective: 1000px;
  position: relative;
  top:-17vh;/* height to top */
  padding-top: 10vh;
}
.karuselka-deasgen{
  width: 100%;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear; /* speed: */
}
.karuselka-deasgen .kilodes-lasun-item{
  width: 100%;
  height: 25vh;
  position: absolute;
  overflow: hidden;
}
.kadsulas1{
  transform: rotateY(0deg) translateZ(50vh);
}
.kadsulas2{
  transform: rotateY(40deg) translateZ(50vh);
}
.kadsulas3{
  transform: rotateY(80deg) translateZ(50vh);
}
.kadsulas4{
  transform: rotateY(120deg) translateZ(50vh);
}
.kadsulas5{
  transform: rotateY(160deg) translateZ(50vh);
}
.kadsulas6{
  transform: rotateY(200deg) translateZ(50vh);
}
.kadsulas7{
  transform: rotateY(240deg) translateZ(50vh);
}
.kadsulas8{
  transform: rotateY(280deg) translateZ(50vh);
}
.kadsulas9{
  transform: rotateY(320deg) translateZ(50vh);
}
.kadsulas10{
  transform: rotateY(360deg) translateZ(50vh);
}
.kilodes-lasun-item{
  box-shadow: 0px 0px 20px 0px #000;
  border-radius: 3vh;

}
.karuselka-deasgen .img{
  transition: ease-in-out 0.5s;
  width: 100%;
  height: 100%;
}
.karuselka-deasgen .img:hover {
  transform: scale(1.1);
  transition: all 0.5s;
  position: absolute;
}
.karuselka-deasgen:hover {
  animation-play-state: paused;
  cursor: pointer;
}
/* animation rotate */
@keyframes rotate {
  from {
  transform: rotateY(0deg);
  } to {
  transform: rotateY(360deg);
  }
}

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

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

21 Ноября 2020 Загрузок: 6 Просмотров: 1485 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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