» »

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

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

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

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

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

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

Слайдер на CSS для сайта

Установка:

HTML

Код
<section id="slaydesanud">
  <div class="slaydesan-udentasuv">
  <div class="kartinka-slaydera">
  <figure class="shadow"><img src="http://zornet.ru/_fr/79/s6865174.jpg"/></figure>
  <figure class="shadow"><img src="http://zornet.ru/_fr/79/s5869859.jpg"/></figure>
  <figure class="shadow"><img src="http://zornet.ru/_fr/79/s6787665.jpg"/></figure>
  <figure class="shadow"><img src="http://zornet.ru/_fr/79/s2908709.jpg"/></figure>
  <figure class="shadow"><img src="http://zornet.ru/_fr/79/s0454343.jpg"/></figure>
  <figure class="shadow"><img src="http://zornet.ru/_fr/79/5122556.jpg"/></figure>
  <figure class="shadow"><img src="http://zornet.ru/_fr/79/s2068764.jpg"/></figure>
  <figure class="shadow"><img src="http://zornet.ru/_fr/79/s2798823.jpg"/></figure>
  <figure class="shadow"><img src="http://zornet.ru/_fr/79/s5842847.jpg"/></figure>
  </div>
  </div>
</section>

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-режимов, что настраивается под основной стиль сайта.

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

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

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

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

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