Css 如何旋转li：独立于li之前？

如何旋转li：在独立于li之前？

我尝试了这个方法，但不起作用：

-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);

问题是：

这是HTML：

<nav id="menu">
    <ul>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
    </ul>
</nav>

这是它现在如何工作的图像，也是我希望它如何工作的图像。

---

伪元素：：before和：：after实际上是在

因此，如果将
旋转17度，它们也会这样做，
除非您明确重置其位置：

li:hover
     {transform:rotate(17deg);}
li:hover::before, li:hover::after
     {transform:rotate(-17deg);}

伪元素：：before和：：after实际上是在

因此，如果将
旋转17度，它们也会这样做，
除非您明确重置其位置：

li:hover
     {transform:rotate(17deg);}
li:hover::before, li:hover::after
     {transform:rotate(-17deg);}

你能发布一张理想效果的图片吗？你能发布一张理想效果的图片吗？这有可能不起作用吗？你能给我一个JSFIDLE代码吗？这里有一把小提琴来演示这一点。它基于@SW4 fiddle，应用了Wes的解决方案。非常漂亮的非常感谢。这可能不起作用吗？你能给我一个JSFIDLE代码吗？这里有一把小提琴来演示这一点。它基于@SW4 fiddle，应用了Wes的解决方案。非常漂亮的非常感谢你。