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

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

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

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

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

Красивый слайдер на CSS для сайта

Установка:

HTML

Код
<div class="header">
  <div class="design-kides">
  <div class="karuselka-deasgen">
  <div class="kilodes-lasun-item kadsulas1">
  <img class="img" src="http://zornet.ru/_fr/79/s8833182.jpg">
  </div>
  <div class="kilodes-lasun-item kadsulas2">
  <img class="img" src="http://zornet.ru/_fr/79/s4501585.jpg">
  </div>
  <div class="kilodes-lasun-item kadsulas3">
  <img class="img" src="http://zornet.ru/_fr/79/s3386831.jpg">
  </div>
  <div class="kilodes-lasun-item kadsulas4">
  <img class="img" src="http://zornet.ru/_fr/79/s2442979.jpg">
  </div>
  <div class="kilodes-lasun-item kadsulas5">
  <img class="img" src="http://zornet.ru/_fr/79/s0050490.jpg">
  </div>
  <div class="kilodes-lasun-item kadsulas6">
  <img class="img" src="http://zornet.ru/_fr/79/s9234565.jpg">
  </div>
  <div class="kilodes-lasun-item kadsulas7">
  <img class="img" src="http://zornet.ru/_fr/79/s2814034.jpg">
  </div>
  <div class="kilodes-lasun-item kadsulas8">
  <img class="img" src="http://zornet.ru/_fr/79/s8080648.jpg">
  </div>
  <div class="kilodes-lasun-item kadsulas9">
  <img class="img" src="http://zornet.ru/_fr/79/s9122953.jpg">
  </div>
  <div class="kilodes-lasun-item kadsulas10">
  <img class="img" src="http://zornet.ru/_fr/79/s7265673.jpg">
  </div>
  </div>
  </div>
  </div>

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-анимации. Также ранее на сайте был размещен отзывчивый слайдер, который по своей конфигураций схожий с этим, разве есть небольшие отличие, как в этом варианте нет библиотеке, но характеристика работы почти аналогична.

Демонстрация
2020-11-21 Загрузок: 1 Просмотров: 243 Комментарий: (0)

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

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

Оставь свой отзыв

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