» »

Красивый 3D слайдер на чистом CSS3

Красивый 3D слайдер на чистом CSS3
Этот оригинальный 3D слайдер является доказательством того, что такой формат можно закрепить на плоском сайте, где будет оригинально смотреться. Что является простым и легким в обращение на интернет портале. Где его также можно увидеть в любом блоке, что будет нести тематический характер. Сами переключатели идут в стандартном виде кнопок, что по умолчанию находятся под изображение.

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

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

Слайдер для сайта в адаптивном стиле

Где при клике идут разные переходы

Адаптивный слайдер 3d на CSS для сайта

Установка:

HTML

Код
<section class="cosnova-karkasa">
  <input type="radio" checked class="katunem-slayda a" name="three-d">
  <input type="radio" class="katunem-slayda b" name="three-d">
  <input type="radio" class="katunem-slayda c" name="three-d">
  <input type="radio" class="katunem-slayda d" name="three-d">
  <input type="radio" class="katunem-slayda e" name="three-d">
  <input type="radio" class="katunem-slayda f" name="three-d">
  <div class="adevulad-asuslamad">
  <figure class="aklanos-elemen">
  <img src="http://zornet.ru/_fr/83/0956932.jpg" alt="">
  </figure>
  <figure class="aklanos-elemen">
  <img src="http://zornet.ru/_fr/83/5665433.jpg" alt="">
  </figure>
  <figure class="aklanos-elemen">
  <img src="http://zornet.ru/_fr/83/9319271.png" alt="">
  </figure>
  <figure class="aklanos-elemen">
  <img src="http://zornet.ru/_fr/83/6551842.png" alt="">
  </figure>
  <figure class="aklanos-elemen">
  <img src="http://zornet.ru/_fr/83/3991317.jpg" alt="">
  </figure>
  <figure class="aklanos-elemen">
  <img src="http://zornet.ru/_fr/83/0992254.jpg" alt="">
  </figure>
  </div>
  </section>

CSS

Код
.cosnova-karkasa{
margin:30px auto;
width:295px;
height:295px;
border-radius: 3px;
position:relative;
-webkit-perspective:1000px;
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;
-webkit-box-shadow:0 20px 60px rgba(0,0,0,0.2), 0 0 40px rgba(0,0,0,0.2) inset;
  -moz-box-shadow:0 20px 60px rgba(0,0,0,0.2), 0 0 40px rgba(0,0,0,0.2) inset;
  box-shadow:0 20px 60px rgba(0,0,0,0.2), 0 0 40px rgba(0,0,0,0.2) inset;
}
.adevulad-asuslamad{
width:100%;
height:100%;
position:absolute;
-webkit-transition:-webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
-webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
-webkit-transform:translateZ( -150px );
  -moz-transform:translateZ( -150px );
  -ms-transform:translateZ( -150px );
  -o-transform:translateZ( -150px );
  transform:translateZ( -150px );
}
.adevulad-asuslamad .aklanos-elemen{
width:100%;
height:100%;
display:block;
margin:0;
position:absolute;
}
.adevulad-asuslamad .aklanos-elemen img{
width:100%;
height:100%;
display:block;
margin:0;
}
.aklanos-elemen:nth-child(1){
-webkit-transform:rotateY( 0deg ) translateZ( 150px );
  -moz-transform:rotateY( 0deg ) translateZ( 150px );
  -ms-transform:rotateY( 0deg ) translateZ( 150px );
  -o-transform:rotateY( 0deg ) translateZ( 150px );
  transform:rotateY( 0deg ) translateZ( 150px );
}
.aklanos-elemen:nth-child(2){
-webkit-transform:rotateX( 180deg ) translateZ( 150px );
  -moz-transform:rotateX( 180deg ) translateZ( 150px );
  -ms-transform:rotateX( 180deg ) translateZ( 150px );
  -o-transform:rotateX( 180deg ) translateZ( 150px );
  transform:rotateX( 180deg ) translateZ( 150px );
}
.aklanos-elemen:nth-child(3){
-webkit-transform:rotateY( 90deg ) translateZ( 150px );
  -moz-transform:rotateY( 90deg ) translateZ( 150px );
  -ms-transform:rotateY( 90deg ) translateZ( 150px );
  -o-transform:rotateY( 90deg ) translateZ( 150px );
  transform:rotateY( 90deg ) translateZ( 150px );
}
.aklanos-elemen:nth-child(4){
-webkit-transform:rotateY( -90deg ) translateZ( 150px );
  -moz-transform:rotateY( -90deg ) translateZ( 150px );
  -ms-transform:rotateY( -90deg ) translateZ( 150px );
  -o-transform:rotateY( -90deg ) translateZ( 150px );
  transform:rotateY( -90deg ) translateZ( 150px );
}
.aklanos-elemen:nth-child(5){
-webkit-transform:rotateX( 90deg ) translateZ( 150px );
  -moz-transform:rotateX( 90deg ) translateZ( 150px );
  -ms-transform:rotateX( 90deg ) translateZ( 150px );
  -o-transform:rotateX( 90deg ) translateZ( 150px );
  transform:rotateX( 90deg ) translateZ( 150px );
}
.aklanos-elemen:nth-child(6){
-webkit-transform:rotateX( -90deg ) translateZ( 150px );
  -moz-transform:rotateX( -90deg ) translateZ( 150px );
  -ms-transform:rotateX( -90deg ) translateZ( 150px );
  -o-transform:rotateX( -90deg ) translateZ( 150px );
  transform:rotateX( -90deg ) translateZ( 150px );
}
.a:checked ~ .adevulad-asuslamad{
-webkit-transform:translateZ( -150px ) rotateY( 0deg );
  -moz-transform:translateZ( -150px ) rotateY( 0deg );
  -ms-transform:translateZ( -150px ) rotateY( 0deg );
  -o-transform:translateZ( -150px ) rotateY( 0deg );
  transform:translateZ( -150px ) rotateY( 0deg );
}
.b:checked ~ .adevulad-asuslamad{
-webkit-transform:translateZ( -150px ) rotateX( -180deg );
  -moz-transform:translateZ( -150px ) rotateX( -180deg );
  -ms-transform:translateZ( -150px ) rotateX( -180deg );
  -o-transform:translateZ( -150px ) rotateX( -180deg );
  transform:translateZ( -150px ) rotateX( -180deg );
}
.c:checked ~ .adevulad-asuslamad{
-webkit-transform:translateZ( -150px ) rotateY( -90deg );
  -moz-transform:translateZ( -150px ) rotateY( -90deg );
  -ms-transform:translateZ( -150px ) rotateY( -90deg );
  -o-transform:translateZ( -150px ) rotateY( -90deg );
  transform:translateZ( -150px ) rotateY( -90deg );
}
.d:checked ~ .adevulad-asuslamad{
-webkit-transform:translateZ( -150px ) rotateY( 90deg );
  -moz-transform:translateZ( -150px ) rotateY( 90deg );
  -ms-transform:translateZ( -150px ) rotateY( 90deg );
  -o-transform:translateZ( -150px ) rotateY( 90deg );
  transform:translateZ( -150px ) rotateY( 90deg );
}
.e:checked ~ .adevulad-asuslamad{
-webkit-transform:translateZ( -150px ) rotateX( -90deg );
  -moz-transform:translateZ( -150px ) rotateX( -90deg );
  -ms-transform:translateZ( -150px ) rotateX( -90deg );
  -o-transform:translateZ( -150px ) rotateX( -90deg );
  transform:translateZ( -150px ) rotateX( -90deg );
}
.f:checked ~ .adevulad-asuslamad{
-webkit-transform:translateZ( -150px ) rotateX( 90deg );
  -moz-transform:translateZ( -150px ) rotateX( 90deg );
  -ms-transform:translateZ( -150px ) rotateX( 90deg );
  -o-transform:translateZ( -150px ) rotateX( 90deg );
  transform:translateZ( -150px ) rotateX( 90deg );
}
.katunem-slayda{
margin:350px 10px 0 0;
float:left;
}
.katunem-slayda:first-child{
margin:350px 10px 0 88px;
}

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

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

Вы можете заставить изображения переворачиваться вверх, прокручивая или опуская страницу, и все это задействовать на чистом CSS. Но потребуется некоторая работа, чтобы переместить этот эффект анимации в полноразмерное изображение, в тот момент, когда меняються размеры, ведь он не адаптивный, а больше для блоков сайтов создавался.
2019-11-23 Загрузок: 1 Просмотров: 277 Комментарий: (0)

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

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

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

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