Простая анимация поворота, которая будет происходить при наведение клика, но все больше можно ее заметить на веб сайтах. Безусловно она популярна, так как можно самостоятельно выставить скорость, где не нужно исключать стилистику дизайна. Вы можете перемещать и поворачивать трансформируя элемент, чтобы изменить положение и направление анимационного клипа.
Фактически, каждый слой имеет свою собственную трансформирующую позицию, где по умолчанию выставляет все корректно, но при клике все автоматически срабатывает, и сама анимация появляется по заданной в стилистике CSS скорости.. Основная цель, это позволить вам повторно использовать анимацию, перемещая и поворачивая их в пространстве.
HTML
Код
<div class="dingaprovides rigunstea" style=" border-color: #e21515;">ZORNET.RU #3</div>
CSS
Код
.dingaprovides {
float: left;
margin: 5em 3em;
width: 100px;
height: 59.8px;
border: 1px solid green;
background-color: #fff;
line-height: 60px;
text-align: center;
}
.dingaprovides.rigunstea:hover {
cursor: pointer;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.dingaprovides {
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
Демонстрация
