ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект наклона для изображений на CSS

Эффект наклона для изображений на CSS

Оригинальный по своей анимации эффект при наведении курсора, который исполнен на чистом CSS, где присутствует красивый дизайн в формате 3D. Здесь мы предадим изображение такой анимационный эффект, который редко можно увидеть на простом софт портале. Он больше подходит на официальные сайты или где превалирует оригинальность. Так как это безусловно будет всеми замечено, ведь изначально видит одну картинку, которую расположили на страницы.

Но только наводим клик, то на заданной скоростью она начинается падать или плавно показывать низ. И когда весь трюк произошел, то на этом низ сайте можно увидеть надпись, которую изначально не видно, только появляется при самом эффекте.

А там дальше можно сделать клик и перейти, ведь это сделано для того, чтоб выставить ключевые слова, но преподнести в оригинальном виде. Как уже в описание знакомил, но повторюсь, так как считаю одно из главных, это не присутствует JS скрипт, где не будет такой нагрузки, как считается при установках любой анимации.

Так видим, где только наведенный клик, что начинается изгиб.

Здесь полностью завершенный эффект, и отчетливо замечаем надпись на форме в 3D.

Создать загнутый уголок с помощью стилистики

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

HTML

Код

<div class="desacopgtu-kasebundes">
  <a href="Ссылка на переход страницы">
  <span>
ZorNet.ru - портал для вебмастера</span>
  </a>
</div>

CSS

Код

.desacopgtu-kasebundes {
  width: 738px; height: 397px; margin: 65px auto;
  perspective: 1000px;
}
.desacopgtu-kasebundes a {
  display: block; width: 100%; height: 100%;
  background:
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  url("Ставим здесь ссылку для изображение");
  background-size: 0, cover;
  transform-style: preserve-3d;
  transition: all 0.6s;
}
.desacopgtu-kasebundes:hover a {transform: rotateX(75deg); transform-origin: bottom;}
.desacopgtu-kasebundes a:after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 35px;
  background: inherit; background-size: cover, cover;
  background-position: bottom;
  transform: rotateX(90deg); transform-origin: bottom;
}

.desacopgtu-kasebundes a span {
  color: white; text-transform: uppercase;
  position: absolute; top: 100%; left: 0; width: 100%;
  font: bold 13px/37px Arial; text-align: center;

  transform: rotateX(-89.99deg); transform-origin: top;
  z-index: 1;
}

.desacopgtu-kasebundes a:before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(14, 14, 14, 0.5);
  box-shadow: 0 0 100px 48px rgba(14, 14, 14, 0.5);
  transition: all 0.6s;

  opacity: 0.16;
  transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  transform-origin: bottom;
}
.desacopgtu-kasebundes:hover a:before {
  opacity: 1;

  box-shadow: 0 0 25px 25px rgba(14, 14, 14, 0.5);

  transform: rotateX(0) translateZ(-60px) scale(0.85);
}

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

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

19 Февраля 2019 Загрузок: 2 Просмотров: 1773 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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