ZorNet.Ru — сайт для вебмастера » HTML и CSS » 3D слайдер с помощью чистого HTML + CSS

3D слайдер с помощью чистого HTML + CSS

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

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

Используя ранее существующие методы CSS, а также новые методы CSS3, мы собираемся создать довольно крутой слайдер изображений только для CSS, где нет стрелок, а существует трехмерные преобразования. Для этого мы собираемся использовать несколько трюков CSS, которые позволят вам сделать. У нас есть несколько элементов формы, что будем скрывать, и метка, которая связана с каждым элементом формы.

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

Так идет по умолчанию, где проверялся на работоспособность.

Установка:

HTML

Код

CSS

Код

#slaydesanud {
  margin: 0 auto;
  padding-top: 50px;
  height: 600px;
  width: 100%;
  background-color: #161f2d;
  box-sizing: border-box;
}

.slaydesanud-title {
  font-family: 'Allerta Stencil';
  font-size: 62px;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  margin-top: 25%;
  letter-spacing: 3px;
  font-weight: 300;
}

.kicuden-asukidas {
  padding-top: 50px;
  font-size: 18px;
} .kicuden-asukidas-two {
  font-size: 15px;
} .kicuden-asukidas-three {
  font-size: 13px;
} .kicuden-asukidas-four {
  font-size: 11px;
} .kicuden-asukidas-five {
  font-size: 9px;
} .kicuden-asukidas-six {
  font-size: 7px;
} .kicuden-asukidas-seven {
  font-size: 5px;
} .kicuden-asukidas-eight {
  font-size: 3px;
} .kicuden-asukidas-nine {
  font-size: 1px;
}

.slaydesan-udentasuv {
  margin: auto;
  width: 190px;
  perspective: 1000px;
  position: relative;
  padding-top: 80px;
}

.kartinka-slaydera {
  width: 100%;
  position: absolute;
  float: right;
  animation: rotar 15s infinite linear;
  transform-style: preserve-3d;
}

.kartinka-slaydera:hover {
  animation-play-state: paused;
  cursor: pointer;
}

.kartinka-slaydera figure {
  width: 100%;
  height: 120px;
  border: 1px solid #3b444b;
  overflow: hidden;
  position: absolute;
}

.kartinka-slaydera figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(300px);
} .kartinka-slaydera figure:nth-child(2) {
  transform: rotateY(40deg) translateZ(300px);
} .kartinka-slaydera figure:nth-child(3) {
  transform: rotateY(80deg) translateZ(300px);
} .kartinka-slaydera figure:nth-child(4) {
  transform: rotateY(120deg) translateZ(300px);
} .kartinka-slaydera figure:nth-child(5) {
  transform: rotateY(160deg) translateZ(300px);
} .kartinka-slaydera figure:nth-child(6) {
  transform: rotateY(200deg) translateZ(300px);
} .kartinka-slaydera figure:nth-child(7) {
  transform: rotateY(240deg) translateZ(300px);
} .kartinka-slaydera figure:nth-child(8) {
  transform: rotateY(280deg) translateZ(300px);
} .kartinka-slaydera figure:nth-child(9) {
  transform: rotateY(320deg) translateZ(300px);
} .kartinka-slaydera figure:nth-child(10) {
  transform: rotateY(360deg) translateZ(300px);
}

.shadow {
  position: absolute;
  box-shadow: 0px 0px 20px 0px #000;
  border-radius: 1px;
}

.kartinka-slaydera img {
  image-rendering: auto;
  transition: all 300ms;
  width: 100%;
  height: 100%;
}

.kartinka-slaydera img:hover {
  transform: scale(1.2);
  transition: all 300ms;
}

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

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

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

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

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

СКАЧАТЬ

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

Kosten

Комментарии: 2
Порядок вывода комментариев: irina197980natasha 05 Декабря 2021 18:39¹ 0 здравствуйте,я начинающий дизайнер создаю таплинк,а можно инструкцию как это применить Kosten 05 Декабря 2021 23:03² 0 По месту, где хотите видеть HTML, далее прописать стили, аналогично по месту.