3D-эффект только на CSS

Приятный 3D-эффект только на CSS

'1'

Посмотреть на Codepen



Прежде чем начать, хотел бы обратить внимание, что у блога есть телеграм канал https://t.me/frontips, где можно узнавать о выходе новых статей и со временем будет появляться больше интересной и полезной информации.

Поддержите развитие блога и канала подпиской!

А теперь перейдём к теме статьи ;) Приятного чтения!



Разметка 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/



Друзья, стараюсь для вас, поддержите проект!

Подписывайтесь, впереди много всего интересного и полезного ;)

Telegram - https://t.me/frontips

VK - https://vk.com/frontips