Блок перевёртыш CSS

Сергей Кутузов

Оригинальный эффект, привлекающий к себе внимание посетителя, и совершенно не портящий внешний вид страницы — блок-перевёртыш.

Перевёртышем он становиться при наведении на него курсора мыши. Попробуйте, наведите курсор на мою фотографию.

Согласитесь, если посетитель проведёт курсором по такому элементу, и он вдруг оживёт, то это однозначно привлечёт его внимание.

В этот блог легко вставляются гиперссылки, фоновые изображения и всё, что можно вставить в html блок.

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.perspective--100 {
  perspective: 100px;
  -webkit-perspective: 100px;
	  -ms-perspective: 100px;
}

.otcrytka {
  display: block;
  text-align: center;
  width: 150px;
  height: 150px;
  color: #fff;
  background-color: rgb(55,124,255);
  font-size: 20px;
  line-height: 250px;
  background-image: url(images/sk1.jpg);
  border-radius: 7px;
  box-shadow: inset 0 0 0 3px #705E5F;
  -webkit-transition: transform 3s;
	  -ms-transition: transform 3s;
	  transition: transform 3s;

}

.otcrytka:hover {
  -webkit-transform: rotateY(180deg);
	  -ms-transform: rotateY(180deg);
	  transform: rotateY(180deg);
}

</style>
</head>
<body>

<div class="perspective"><a href="https://starper55plys.ru/">
  <span class="otcrytka">
    Sergei Kutuzov
 < /span></a>
    </div>
</body>
</html>

Доводить этот код до своих целей, размеры там, картинки и т.п., лучше в Notepad++, а уж потом можно в файл functions.php вставить шорткод, и вставить в него Ваш доведённый код.

В зависимости от настроек темы, оформление перевёртыша ещё возможно придётся подправить, а возможно и нет.

Желаю творческих успехов.


Перекур

История повторяется дважды. Один раз в виде трагедии. И второй раз — для тупых

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

2 комментария на «Блок перевёртыш CSS»

  1. stariс говорит:

    Можно с помощью шорткода, а можно на странице разместить html, а css в style.css, только всем элементам html надо задать классы, и свойства прописать этим классам.

  2. Игорь говорит:

    Как на одной странице поместить два разных изображение с такой анимацией?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *