Я делаю круговые кнопки с несколькими градиентами, и он должен вращаться на hover..

<ul class="navigation">
    <li>
        <a href="#" class="home">Home</a>
    </li>
</ul>

CSS:

.navigation li {
        float: left;
    }

.navigation li a {
    display: inline-block;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Titillium Web', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: white;
    text-decoration: none;
}

.home {
    background: linear-gradient(130deg, #aac4df 15%, #556270 25%, #556270 50%, #414F55 50%);
    width: 110px;
    height: 110px;
    line-height: 110px;
    position: relative;
    z-index: -1;
}

.home:hover {
    transform: rotate(-45deg);
}

Здесь у меня много проблем.

1- Вращение на.home: зависание не работает в любом браузере.

2- Если это работает, я думаю, что он будет вращать как круглый фон, так и текст "Главная". Будет ли способ вращать круг только?

3- Я не уверен, как объяснить это, но это как если бы в окружности не было много полигонов. Есть видимые прямые линии, которые можно увидеть при масштабировании. Эта проблема возникает только в некоторых браузерах и не кажется, изменились, установив радиус границы в нечто большее.