html - 为什么悬停时变换旋转不起作用？

Question

我正在制作具有多个渐变的圆形按钮，并且它应该在悬停时旋转..

<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:hover 的旋转在任何浏览器中都不起作用。

2-如果它确实有效，我猜它会旋转圆形背景和文本“Home”。有没有办法只旋转圆圈？

3-我不知道如何解释这个，但是好像圆圈没有足够的多边形，缩放时可以看到可见的直线，这个问题只出现在某些浏览器中，似乎没有通过将边界半径设置为更大的值来进行更改。

Answer 1

将悬停样式更改为

 li:hover .home {
     background: linear-gradient(90deg, #aac4df 15%, #556270 25%, #556270 50%, #414F55 50%);
 }

将解决你所有的问题

小提琴