3D-эффект только на CSS
Приятный 3D-эффект только на CSS
Посмотреть на Codepen
Разметка HTML
<div class="section section_dark">
<div class="container">
<div class="perspective">
<div class="perspective__flex">
<div class="perspective__col">
<div class="perspective__item perspective-item">
<div class="perspective-item__icon"><img src="https://picsum.photos/200/200" alt=""/></div>
<div class="perspective-item__title">Dolor sit</div>
<div class="perspective-item__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit animi minima ad, saepe possimus numquam. Sunt odio, ratione labore. Vitae ea omnis modi, fugiat, ducimus nulla illum minus culpa</div>
</div>
</div>
<div class="perspective__col">
<div class="perspective__item perspective-item">
<div class="perspective-item__icon"><img src="https://picsum.photos/200/201" alt=""/></div>
<div class="perspective-item__title">Lorem ipsum</div>
<div class="perspective-item__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit animi minima ad, saepe possimus numquam. Sunt odio, ratione labore. Vitae ea omnis modi, fugiat, ducimus nulla illum minus culpa</div>
</div>
</div>
<div class="perspective__col">
<div class="perspective__item perspective-item">
<div class="perspective-item__icon"><img src="https://picsum.photos/200/202" alt=""/></div>
<div class="perspective-item__title">Nulla illum</div>
<div class="perspective-item__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit animi minima ad, saepe possimus numquam. Sunt odio, ratione labore. Vitae ea omnis modi, fugiat, ducimus nulla illum minus culpa</div>
</div>
</div>
</div>
</div>
</div>
</div>
Подробнее про адаптивную сетку - Адаптивная сетка для каталога
Стили CSS
.section.section_dark {
background: #272838;
}
.container {
max-width: 1170px;
margin: 0 auto;
padding: 0 30px;
}
.perspective {
padding: 120px 0;
overflow: hidden;
}
.perspective__flex {
display: flex;
margin-left: -15px;
margin-right: -15px;
transition: all 0.6s ease;
}
.perspective__flex:hover {
transform: translateX(300px); /* Компенсируем сдвиг блоков */
}
.perspective__flex:hover .perspective__item {
transform: perspective(800px) rotateY(25deg) scale(0.9) rotateX(10deg); /* Эффект 3D, проще всего будет понять, если самому попробовать поменять разные значения, ссылка на этот пример на Codepen в начале статьи */
opacity: 0.5;
-webkit-filter: blur(2px);
filter: blur(2px); /* Эффект размытия */
}
.perspective__flex:hover .perspective__col {
margin-left: -150px; /* Сдвиг блоков влево для эффекта наложения друг на друга */
}
.perspective__flex:hover .perspective__col:hover {
z-index: 1;
}
.perspective__flex:hover .perspective__col:hover .perspective__item {
transform: perspective(800px) rotateY(-15deg) translateY(-50px) rotateX(10deg) scale(1);
opacity: 1;
-webkit-filter: blur(0);
filter: blur(0);
}
.perspective__col {
z-index: 0;
transition: all 0.6s ease;
width: 33.33333333%;
padding: 0 15px;
}
.perspective__item {
padding: 25px;
transition: all 0.6s ease;
background: rgba(255,255,255,0.4);
border-radius: 25px;
background: linear-gradient(325deg, #3f5efb 0%, #fc466b 100%);
}
.perspective-item {
color: #fff;
}
.perspective-item__title {
font-weight: bold;
font-size: 24px;
text-align: center;
margin-bottom: 15px;
}
.perspective-item__text {
font-size: 18px;
text-align: center;
}
.perspective-item__icon {
display: block;
margin: 0 auto 30px;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
transition: all 0.6s ease;
}
.perspective-item__icon img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
/* При ширине браузера меньше 992px убираем эффект 3D */
@media (max-width: 991.98px) {
.perspective__flex {
flex-direction: column;
}
.perspective__flex:hover {
transform: none;
}
.perspective__flex:hover .perspective__item {
transform: none;
opacity: 1;
-webkit-filter: none;
filter: none;
}
.perspective__flex:hover .perspective__col {
margin-left: 0;
}
.perspective__flex:hover .perspective__col:hover .perspective__item {
transform: none;
}
.perspective__col {
width: 100%;
margin-bottom: 30px;
}
}
Проверил работу в браузерах до Internet Explorer 11, так что можно использовать данный прием в проектах.
Возможно также будет полезно Почему размеры блока больше заданных
Изображения - https://picsum.photos/