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

поворот картинки CSSДоброго времени суток, читатели, друзья и гости блога. Сегодня предлагаю вам эффект поворота  картинки на 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


11 комментариев:

  1. Виктория! Спасибо! Как интересно картинка поворачивается!Все эффекты с картинками (у вас их так много) потом попробую создать на тестовом блоге "БиблиоИрина". Виктория! pr-cy.ru оценили ВФонарик в 67%, а Блог Кота - 61%.
    Я прочитала, что 60% уже очень хорошо! Буду работать дальше!
    Отличного вам настроения! Хорошо летом отдохните, чтобы с новыми силами учить нас-чайников!

    ОтветитьУдалить
    Ответы
    1. Ирина, вот волшебство CSS. С блогом всегда работы полно. Спасибо за пожелания. Кстати. Утром сегодня обнаружила температуру+38,5.

      Удалить
  2. спасибо. а я вот пока ещё ничего и не применил в блоге (

    ОтветитьУдалить
    Ответы
    1. Семён , значит всё ещё впереди.

      Удалить
  3. Вика, привет. Отличный эффект, кстати, отлично смотрится на лендингах. Я уже не раз использовал. Классная вещь, когда изображение меняется на описание.

    ОтветитьУдалить
    Ответы
    1. Максим, спасибо тебе за визит и комментарий. А можно это где-то это посмотреть. Я в качестве наглядного примера ссылку в пост добавлю.

      Удалить
  4. Очень интересный эффект, здорово!!!

    ОтветитьУдалить
  5. Установила, интересно смотрится. Спасибо, Виктория!

    ОтветитьУдалить
  6. А, ещё.... Подскажите, Виктория, картинки добавляются только по url или можно с компьютера. Если можно, подскажите как. Пробовала загружать с комп-ра, не работает. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Лариса, здравствуйте. Нет с компьютера ни как. Адрес нужен, гдк-то ведь её нужно поисковикам найти.

      Удалить

Пользовательский поиск