CSS悬停应该将垂直文本旋转为水平文本

Question

当悬停时，我希望垂直对齐的文本在水平方向上旋转。作为动画。不幸的是，我现在不能再往前走了。它是关于右边的链接("背面"(。谁知道怎么做？感谢您的提前通知！

.container {
display: block;
position: relative;
border: solid 3px #ccc;
padding: 40px 60px;
max-width: 400px;
margin: 100px auto 0;
}    
#nav {
position: absolute;
top: 50px;
left: 20px;
}
#nav a {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
font-weight: bold;
color: var(--text-color)
}
#nav a {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
}
#nav a:hover {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
color: red;
}

<div id="nav">
<a href="/">back</a>      
</div>
<div class="container">123</div>

Answer 1

display属性必须更改为block才能使transform工作。当transform工作时，您不需要改变方向。可以在:hover上将transform设置为initial，并为动画设置transition。

.container {
display: block;
position: relative;
border: solid 3px #ccc;
padding: 40px 60px;
max-width: 400px;
margin: 100px auto 0;
}    
#nav {
position: absolute;
top: 50px;
left: 20px;
}
#nav a {
display: block;
transform: rotate(-90deg);
transition: .3s;
font-weight: bold;
color: var(--text-color)
}
#nav a:hover {
transform: initial;
color: red;
}

<div id="nav">
<a href="/">back</a>      
</div>
<div class="container">123</div>