Отличное решение для сайтов с услугами, где слайдер идет автоматически, показывая слайд, который изначально по дизайну выстроен в форме круга. Что отличается от других, и такой формат можно видеть как на отдельной страницы, так и на главной, где выводится самая актуальная информация. Это простой и понятный способ добавить интересное обращение к любым веб-сайтам, основанным на портфолио и галерее.
Если вы продолжаете все последние дополнения для разработчиков и дизайнеров, то вы, возможно, слышали о галереях изображений CSS. Хотя большинство людей предпочитают оставаться низко профильными, выбирая традиционные шаблоны на основе галереи, мы заметили, что многие пользователи теперь выбирают дизайн галереи изображений CSS над другими.
HTML
Код
<div class="container">
<div id="galeri">
<figure><img src="http://zornet.ru/_fr/64/2151771.jpg" alt="" width="220"></figure>
<figure><img src="http://zornet.ru/_fr/64/3661643.jpg" alt="" width="220"></figure>
<figure><img src="http://zornet.ru/_fr/64/9852391.jpg" alt="" width="220"></figure>
<figure><img src="http://zornet.ru/_fr/64/7199084.jpg" alt="" width="220"></figure>
<figure><img src="http://zornet.ru/_fr/64/1913335.jpg" alt="" width="220"></figure>
<figure><img src="http://zornet.ru/_fr/64/5981224.jpg" alt="" width="220"></figure>
<figure><img src="http://zornet.ru/_fr/64/9044800.jpg" alt="" width="220"></figure>
<figure><img src="http://zornet.ru/_fr/64/7932342.jpg" alt="" width="220"></figure>
<figure><img src="http://zornet.ru/_fr/64/8314102.jpg" alt="" width="220"></figure>
</div>
</div>
CSS
Код
body{
min-height: 100%;
}
body{
background-image: radial-gradient(mintcream 0%, lightgray 100%);
}
h1{
display: table;
margin: 5% auto 0;
text-transform: uppercase;
font-family: arial;
font-size: 4em;
font-weight: 400;
}
.container{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000;
}
#galeri{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}
#galeri:hover{
animation-play-state: paused;
}
#galeri figure{
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
#galeri figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#galeri figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#galeri figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#galeri figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#galeri figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#galeri figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#galeri figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#galeri figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#galeri figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
}
img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}
@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
Для простоты и простоты использование CSS в качестве основы делает все более привлекательным для просмотра. Независимо от того, реализуете ли вы конструкторские структуры, добавляете ли вы эффекты или анимации, они, скорее всего, более привлекательны и привлекательны для зрителей.
Демонстрация
