Вращаем элементы при наведении на чистом CSS

Простой и красивый эффект при наведении на элементы на чистом CSS? как всегда с демонстрацией
HTML:

<div class="fancy">01</div>
<div class="fancy">02</div>
<div class="fancy">03</div>
<div class="fancy">04</div>

CSS:

.fancy {
    width: 120px;
    height: 120px;
    background: #c0392b;
    color: #fff;
    font: 3em/120px Arial, sans-serif;
    text-align: center;
    float: left;
    margin-right: 30px;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -ms-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
}
.fancy:hover {
    background: #fff;
    color: #c0392b;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    border-radius: 100px;
}

Источник:dle-faq.pro, DLE

Перейти на сайт

Вращаем элементы при наведении на чистом CSS

Похожие новости