Эффект переворачивания изображения выглядит следующим образом: мы наводим курсор мыши на картинку и та поворачивается обратной стороной, на которой мы видим текст.
Создаём папку в ней создаём два файла 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>
<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;
}
background: #5d9d6e;
}
- Пишем стили для блока wrapper.
.wrapper {
margin: 0 auto;
margin-top: 50px;
width: 462px;
height: 609px;
overflow: hidden;
border: 1px solid #000;
}
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;
}
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);
}
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;
}
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;
}
transition: 1s;
transform-style: preserve-3d;
}
- Создаём эффект переворачивания картинки при наведении на неё курсора мыши.
.shifter:hover {
transform: rotateY(180deg);
}
transform: rotateY(180deg);
}
Скачать исходники.