В этой статье речь пойдет о так называемом flip-эффекте, это когда при наведении на объект он переворачивается и показывается его задняя сторона.
С выходом в свет CSS3 появился целый океан удивительных возможностей для реализации красочных эффектов на сайте без использования js-скриптов.
Наверняка вы уже видели на некоторых сайтах эффект о котором пойдет речь. Вы можете сразу посмотреть демонстрацию, чтобы лучше представлять:
Проще всего будет рассмотреть создание на примере. Заготовим разметку:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/css/template.css" type="text/css" />
<title>Страница</title>
</head>
<body>
<div class="flip_effect_horizontal">
<div class="front">front</div>
<div class="back">back</div>
</div>
<div class="flip_effect_vertical">
<div class="front">front</div>
<div class="back">back</div>
</div>
</body>
</html>
В разметке у нас есть два блока для flip-эффекта: один - для горизонтального переворота, второй - для вертикального. Остается добавить необходимые стили, для каждого из них свои:
body {
margin:0;
}
/* ГОРИЗОНТАЛЬНЫЙ FLIP */
.flip_effect_horizontal {
/* общие стили */
width:240px; /* ширина блока с flip */
height:240px; /* высота блока с flip */
position: relative; /* позиционируем для дочерних блоков */
transition:1s; /* скорость поворота */
transform-style: preserve-3d; /* стиль трансформирования 3-д */
/* для поддержки webkit */
-webkit-transition:1s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
/* для поддержки moz */
-moz-transition:1s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
}
.flip_effect_horizontal:hover {
/* общие стили */
transform: rotateY(180deg); /* поворачиваем на 180 градусов по горизонтали */
/* для поддержки webkit */
-webkit-transform: rotateY(180deg);
/* для поддержки moz */
-moz-transform: rotateY(180deg);
}
.flip_effect_horizontal .front {
/* общие стили */
position: absolute; /* абсолютное позиционирование */
width: 100%; /* на всю ширину родительского блока */
height: 100%; /* на всю высоту родительского блока */
background: #FF6600; /* цвет фона */
backface-visibility: hidden; /* скрываем контент, который отвернут от пользователя */
/* для поддержки webkit */
-webkit-backface-visibility: hidden;
/* для поддержки moz */
-moz-backface-visibility: hidden;
}
.flip_effect_horizontal .back {
/* общие стили */
position: absolute; /* абсолютное позиционирование */
width: 100%; /* на всю ширину родительского блока */
height: 100%; /* на всю высоту родительского блока */
background:#00CC00; /* цвет фона */
backface-visibility: hidden; /* скрываем контент, который отвернут от пользователя */
transform: rotateY(180deg); /* отворачиваем задний блок */
/* для поддержки webkit */
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
/* для поддержки moz */
-moz-backface-visibility: hidden;
-moz-transform: rotateY(180deg);
}
/* ВЕРТИКАЛЬНЫЙ FLIP */
.flip_effect_vertical {
/* общие стили */
width:240px; /* ширина блока с flip */
height:240px; /* высота блока с flip */
position: relative; /* позиционируем для дочерних блоков */
transition:1s; /* скорость поворота */
transform-style: preserve-3d; /* стиль трансформирования 3-д */
/* для поддержки webkit */
-webkit-transition:1s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
/* для поддержки moz */
-moz-transition:1s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
}
.flip_effect_vertical:hover {
/* общие стили */
transform: rotateX(180deg); /* поворачиваем на 180 градусов по горизонтали */
/* для поддержки webkit */
-webkit-transform: rotateX(180deg);
/* для поддержки moz */
-moz-transform: rotateX(180deg);
}
.flip_effect_vertical .front {
/* общие стили */
position: absolute; /* абсолютное позиционирование */
width: 100%; /* на всю ширину родительского блока */
height: 100%; /* на всю высоту родительского блока */
background: #FF6600; /* цвет фона */
backface-visibility: hidden; /* скрываем контент, который отвернут от пользователя */
/* для поддержки webkit */
-webkit-backface-visibility: hidden;
/* для поддержки moz */
-moz-backface-visibility: hidden;
}
.flip_effect_vertical .back {
/* общие стили */
position: absolute; /* абсолютное позиционирование */
width: 100%; /* на всю ширину родительского блока */
height: 100%; /* на всю высоту родительского блока */
background:#00CC00; /* цвет фона */
backface-visibility: hidden; /* скрываем контент, который отвернут от пользователя */
transform: rotateX(180deg); /* отворачиваем задний блок */
/* для поддержки webkit */
-webkit-backface-visibility: hidden;
-webkit-transform: rotateX(180deg);
/* для поддержки moz */
-moz-backface-visibility: hidden;
-moz-transform: rotateX(180deg);
}
Как вы можете увидеть сам процесс поворота реализуется через строки 28-35 для горизонтального и 93-100 для вертикального. До этого производиться лишь подготовка стилей. Если планируете использовать этот код у себя, учтите, что удаление некоторой строки может привести к некорректной работе эффекта.
Блока переднего(front) и заднего(back) вида задается позиционирование абсолютное, чтобы они находились как бы в одном месте в родительском блоке.
Всё довольно просто и банально, стоит только немного вглядеться в год и разобраться какое свойство за что отвечает. Ссылка на демонстрацию была в начале статьи.
Метод вполне кроссбраузерный, проверялся в последних версия Opera, Mozilla Firefox, Chrome, Safari. Единственный прокол - IE последних версий, не получилось привести выполнение эффекта переворота(flip) к нужному виду.
Так же способ не является адаптивным, ведь когда пользователь заходит с телефона или планшета за места курсора у него пальцы рук и как заставить правильно реагировать на нажатие пальцем непонятно.
Если у вас появятся идеи или решения этой проблемы, то пишите в комментарии, мы проверим и в случае чего подкорректируем представленный здесь код.
Исходники примера с кодом flip-эффекта вы можете скачать ниже:
Комментарии
Можно ли реализовать это же только с чтобы переворот происходил по клику мышкой по кнопке
Да, можно, но если вы хотите при клике на кнопку - нужно использовать js, по сути за место свойств :hover, эти свойства добавляются/убираются при событии нажатия, либо можно попробовать добавлять класс.
может кто сможет помочь
сайт egocres.com
RSS лента комментариев этой записи