В этом материале рассмотрим эффект flip, который будет отвечать за анимацию, а точнее за полноценный переворот элемента на другую сторону. Где на первой стороне можно написать заголовок, но при наведение курсора произойдет поворот и появится другая сторона, где будет описание. Это как пример, так как его можно задействовать на многих функциях сайта.
Главный плюс в таком трюке, что здесь не задействуется JS-скрипт, так как все создано на чистом CSS3. Безусловно вы встречали на разных сайтах что то похожее, где теперь вы можете выставить такую анимацию на свой сайт, закрепив под него как функционал или материал при переходе.
Приступаем к установке:
HTML
Код
<div class="misanunp-alguedalevel">
<div class="dtumilopag"> Сайт</div>
<div class="nilsatodsed"> Zornet.Ru</div>
</div>
CSS
Код
.misanunp-alguedalevel {
width:157px;
height:157px;
position: relative;
cursor:pointer;
transition:1s;
transform-style: preserve-3d;
-webkit-transition:1s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition:1s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
}
.misanunp-alguedalevel:hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.misanunp-alguedalevel .dtumilopag {
position: absolute;
width: 100%;
height: 100%;
background: #19b727;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.misanunp-alguedalevel .nilsatodsed {
position: absolute;
width: 100%;
height: 100%;
background: #4f7eef;
backface-visibility: hidden;
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
-moz-backface-visibility: hidden;
-moz-transform: rotateY(180deg);
}
На этом все.
Демонстрация
