ZorNet.Ru — сайт для вебмастера » HTML и CSS » Вращающаяся 3D галерея картинок при помощи CSS3

Вращающаяся 3D галерея картинок при помощи CSS3

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

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

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

Приступаем к установке:

HTML

Код

CSS

Код

#zornet_ruksagtun {
margin: 0 auto;
padding-top: 50px;
height: 600px;
width: 100%;
box-sizing: border-box;
}

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

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

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

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

.kabstumil-mirazktup:hover {
animation-play-state: paused;
cursor: pointer;
}

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

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

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

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

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

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

При наведение изображение, то все останавливается, где сам снимок увеличивается.

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

24 Апреля 2018 Просмотров: 1819 Комментариев: (0)

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

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

Kosten

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