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

Самурай
Само же слово «самурай» происходит от глагола haberu, в дословном переводе означающего «служить, поддерживать»
Само же слово «самурай» происходит от глагола 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>
<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.
Вот такой небольшой пост сегодня. Всем удачи. Спасибо, что заглядываете в мои шпаргалки.
здесь можно оформить подписку на новые шпаргалки
Виктория! Спасибо! Как интересно картинка поворачивается!Все эффекты с картинками (у вас их так много) потом попробую создать на тестовом блоге "БиблиоИрина". Виктория! pr-cy.ru оценили ВФонарик в 67%, а Блог Кота - 61%.
ОтветитьУдалитьЯ прочитала, что 60% уже очень хорошо! Буду работать дальше!
Отличного вам настроения! Хорошо летом отдохните, чтобы с новыми силами учить нас-чайников!
Ирина, вот волшебство CSS. С блогом всегда работы полно. Спасибо за пожелания. Кстати. Утром сегодня обнаружила температуру+38,5.
Удалитьспасибо. а я вот пока ещё ничего и не применил в блоге (
ОтветитьУдалитьСемён , значит всё ещё впереди.
УдалитьВика, привет. Отличный эффект, кстати, отлично смотрится на лендингах. Я уже не раз использовал. Классная вещь, когда изображение меняется на описание.
ОтветитьУдалитьМаксим, спасибо тебе за визит и комментарий. А можно это где-то это посмотреть. Я в качестве наглядного примера ссылку в пост добавлю.
УдалитьОчень интересный эффект, здорово!!!
ОтветитьУдалитьСпасибо,Татьяна.
УдалитьУстановила, интересно смотрится. Спасибо, Виктория!
ОтветитьУдалитьА, ещё.... Подскажите, Виктория, картинки добавляются только по url или можно с компьютера. Если можно, подскажите как. Пробовала загружать с комп-ра, не работает. Спасибо!
ОтветитьУдалитьЛариса, здравствуйте. Нет с компьютера ни как. Адрес нужен, гдк-то ведь её нужно поисковикам найти.
Удалить