Веб-мастерская Ларисы ВоронинойЭффект переворачивания на CSS
WEB-мастерская Ларисы Ворониной logo

Эффект переворачивания на CSS Фев 19 2017


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

Создаём папку в ней создаём два файла index.html и style.css, и создаём папку images, куда помещаем картинку.
В index.html пишем простую разметку.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" />
          <title>Эффект переворачивания CSS</title>
     </head>
     <body>
          <div class="wrapper" >
               <div class="shifter">
                    <div class="front">
                         <img src="images/fikus.jpg">
                    </div>
                    <div class="back">
                         <h1>Фикус Бенджамина</h1>
                         <p>Это прекрасное вечно зелёное растение распространено в Китае, Юго-Восточной Азии, в Китае, на Филлипинских островах на севере Австралии. В дикой природе высота растения достигает 25-ти метров. Фикус можно выращивать в домашних условиях.
                         </p>
                         <p>
Названо растение так в честь выдающегося британского ботаника Бенджамина Дейдона Джексона.
                         </p>
                    </div>
               </div>
          </div>
     </body>
</html>

Обратите внимание, что лицевую сторону, т.е. изображение мы поместили в div с классом front, а обратную сторону, т.е. текст в div с классом back.

В файле style.css пишем стили.

  • Задаём цвет общего фона.
body {
background: #5d9d6e;
}
  • Пишем стили для блока wrapper.
.wrapper {
margin: 0 auto;
margin-top: 50px;
width: 462px;
height: 609px;
overflow: hidden;
border: 1px solid #000;
}
  • Пишем правила для лицевой стороны картинки.
.front{
margin: 0 auto;
width: 460px;
height: 607px;
overflow: hidden;
border: 1px solid #555;
backface-visibility: hidden;
position: absolute;
z-index: 2;
}
  • Правила для обратной стороны с текстом.
.back {
margin: 0 auto;
width: 460px;
height: 607px;
overflow: hidden;
border: 1px solid #777;
background: #C3E374;
backface-visibility: hidden;
position: absolute;
transform: rotateY(180deg);
}
  • Определяем стили для текста.
h1 {
padding: 50px;
font-size: 30px;
text-align: center;
}
p {
padding: 20px;
font-size: 20px;
line-height: 1.5;
text-align: justify;
}
  • Задаём скорость переворачивания картинки.
.shifter {
transition: 1s;
transform-style: preserve-3d;
}
  • Создаём эффект переворачивания картинки при наведении на неё курсора мыши.
.shifter:hover {
transform: rotateY(180deg);
}

Рейтинг@Mail.ru