Красивый 3D слайдер на чистом CSS3
 | |
| Этот оригинальный 3D слайдер является доказательством того, что такой формат можно закрепить на плоском сайте, где будет оригинально смотреться. Что является простым и легким в обращение на интернет портале. Где его также можно увидеть в любом блоке, что будет нести тематический характер. Сами переключатели идут в стандартном виде кнопок, что по умолчанию находятся под изображение. Где при клике можно просто сменить изображение, хотя по умолчанию мы наблюдаем один снимок, но при развороте появится 3D эффект, что можно будет заметить другие изображение. Его не скажу, что можно выставить как главным, ведь в таком случай нужно место. А вот как вспомогательный, то здесь станет отличным решением, где вписать под описание или под любой тематический материал на сайте. Также будет возможность просмотра демонстрации в реальном времени, связанную с ползунком, что представляет собой анимированное действие с небольшими, но важными функциями, которые все еще остаются неизменными.  Где при клике идут разные переходы  Установка: 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. Но потребуется некоторая работа, чтобы переместить этот эффект анимации в полноразмерное изображение, в тот момент, когда меняються размеры, ведь он не адаптивный, а больше для блоков сайтов создавался. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
