Jquery 如何在翻转父对象时保持文本的原样？

这是悬停之前

我想这是在悬停之后

在旋转悬停的li后，我希望保持文本水平，如下所示。如何使用简单的解决方案。我看到了一些例子，但不理解。jQuery也可以。请帮忙，谢谢

第四节{
保证金：自动；
宽度：550px；
}
第四节{
填充：8px 10px；
过渡：全部5秒；
背景：棕色；
显示：块；
宽度：30px；
利润底部：3倍；
}
第#四节a{
颜色：#fff；
字体大小：粗体；
}
第四节：悬停{
边框底部：5px实心#000；
变换：旋转（90度）；
}

例子

对所有字母使用

span

标记，通过

transform:rotate（90度）在li悬停时旋转
span

更新HTML和CSS，我已从
li
中删除


HTML

<section id="fourth">
    <h2>Example</h2>
    <nav>
        <ul class="list-inline">
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
      <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
        </ul>
    </nav>
</section>

选中对所有字母使用
span
标记，通过
变换：旋转（90度）在li悬停时旋转
span

更新HTML和CSS，我已从
li
中删除


HTML

<section id="fourth">
    <h2>Example</h2>
    <nav>
        <ul class="list-inline">
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
      <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
        </ul>
    </nav>
</section>

选中将每个文本放入
标记中，并使用相同的方法旋转它


$（“.list inline li”）。悬停(
函数（）{
$（this.find（'a span'）.attr（'class'，'span'）；
if（$（this）.index（）==0）
$（this.css（'margin-bottom'，'-32px'）；
else if（$（this.index（）==（$（this.parent（'ul'）.children（）.length）-1）
$（this.css（'margin-top'，'-32px'）；
其他的
{
$（this.css（'margin-bottom'，'-32px'）；
$（this.css（'margin-top'，'-34px'）；
}
},
函数（）{
if（$（this）.index（）==0）
$（this.css（'margin-bottom'，'3px'）；
else if（$（this.index（）==（$（this.parent（'ul'）.children（）.length）-1）
$（this.css（'margin-top'，'3px'）；
其他的
{
$（this.css（'margin-bottom'，'3px'）；
$（this.css（'margin-top'，'3px'）；
}
});
第四节{
保证金：自动；
宽度：550px；
}
第四节{
填充：8px 10px；
过渡：全部5秒；
背景：棕色；
显示：块；
宽度：30px；
利润底部：3倍；
}
第#四节a{
颜色：#fff；
字体大小：粗体；
}
第四节：悬停{
变换：旋转（-90度）；
边框顶部：5px实心#000；
}
.span{
-moz变换：旋转（90度）；
-webkit变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
位置：绝对位置；
}

例子












将每个文本放入
标记中，并使用相同的方法旋转


$（“.list inline li”）。悬停(
函数（）{
$（this.find（'a span'）.attr（'class'，'span'）；
if（$（this）.index（）==0）
$（this.css（'margin-bottom'，'-32px'）；
else if（$（this.index（）==（$（this.parent（'ul'）.children（）.length）-1）
$（this.css（'margin-top'，'-32px'）；
其他的
{
$（this.css（'margin-bottom'，'-32px'）；
$（this.css（'margin-top'，'-34px'）；
}
},
函数（）{
if（$（this）.index（）==0）
$（this.css（'margin-bottom'，'3px'）；
else if（$（this.index（）==（$（this.parent（'ul'）.children（）.length）-1）
$（this.css（'margin-top'，'3px'）；
其他的
{
$（this.css（'margin-bottom'，'3px'）；
$（this.css（'margin-top'，'3px'）；
}
});
第四节{
保证金：自动；
宽度：550px；
}
第四节{
填充：8px 10px；
过渡：全部5秒；
背景：棕色；
显示：块；
宽度：30px；
利润底部：3倍；
}
第#四节a{
颜色：#fff；
字体大小：粗体；
}
第四节：悬停{
变换：旋转（-90度）；
边框顶部：5px实心#000；
}
.span{
-moz变换：旋转（90度）；
-webkit变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
位置：绝对位置；
}

例子












为了实现这一点，我们可以使用属性
分词：全部分词
和
字母间距
，而不是添加多个
span
标记来分隔每个单词

什么
断字：断开所有的
会对你的

HTML

为了实现这一点，我们可以使用属性
wordbreak:break all
和
字母间距
，而不是添加多个
span
标记来分隔每个单词

什么
断字：断开所有的
会对你的

HTML

标签？？你应该把它们关上。标签？？您应该关闭它们。是否可以将非旋转的li粘贴到旋转的li？因为悬停后有一些间隙。我想删除it@sagarkodte对possible@sagarkodte请让我知道是否可以？？你说的是哪个差距？？文本之间的间隙？？翻转li后，非翻转li之间的顶部和底部存在间隙。。明白了吗？可以把不旋转的li粘贴到旋转的li上吗？因为悬停后有一些间隙。我想删除it@sagarkodte对possible@sagarkodte请让我知道是否可以？？你说的是哪个差距？？文本之间的间隙？？翻转li后，非翻转li之间的顶部和底部存在间隙。。明白了吗？可以把不旋转的li粘贴到旋转的li上吗？因为悬停后有一些间隙。我想把它移除是的，这是可能的。请看我已经编辑了上面的代码片段，使其工作。可以将非旋转的li粘贴到旋转的li吗？因为有
   <section id="fourth">
        <h2>Example</h2>
        <nav>
            <ul class="list-inline">
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
        </nav>
    </section>

    section#fourth{
        margin:auto;
        width: 550px;
    }
    section#fourth li {
        padding: 8px 10px;
        transition: all .5s;
        background: brown;
        display: block;
        width: 30px;
        margin-bottom: 3px;
    }  


  section#fourth li a {
        color: #fff;
        font-weight: bold;
        word-break: break-all;
        display: block;
        letter-spacing: 10px;
}

   section#fourth li:hover{
        border-bottom: 5px solid #000;
        transform: rotate(-90deg);
        min-height: 96px;
    }

    section#fourth li:hover a{
      transform: rotate(90deg);
      word-break: normal;
    }