Эффект поворота изображения.

Доброго времени суток, читатели, друзья и гости блога. Сегодня предлагаю вам эффект поворота  картинки на CSS. Используя свойство  transition, заставим картинку повернуться. В результате откроется описание к фото. Посмотрите ещё красивое всплывающее описание у картинок.
На многих сайтах видела использование такого эффекта в качестве визитной карточки.

Ваше фото и контакты при наведении на картинку курсора. Вот как это будет выглядеть.

Самурай
Само же слово «самурай» происходит от глагола haberu, в дословном переводе означающего «служить, поддерживать»

Код.

<div class="card-container">
  <div class="card">
  <div class="side"><img src=" http://s019.radikal.ru/i643/1602/87/eabe0ef54b4b.jpg" alt="Самурай"> </div>
  <div class="side back">Текст на обратной стороне</div>
  </div>
</div>

<style>
.card-container {
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateY(180deg);
}</style>

Замените адрес картинки и текст, который будет отображаться при повороте изображения. Применить в блоге можно в самом сообщении, перейдя в режим HTML или установить в гаджет HTML/JavaScript.

Вот такой небольшой пост сегодня. Всем удачи. Спасибо, что заглядываете в мои шпаргалки.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email