CSS hover should rotate vertical text to horizontal - css

Question

I would like a vertically aligned text to rotate in the horizontal direction when it is hovered. As an animation. Unfortunately I can't get any further at the moment. It is about the link on the right ("back"). Who knows how to do it? Thanks for advance!
.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">
back
</div>
<div class="container">123</div>

Answer 1

The display property has to be changed to block for the transform to work. You don’t need to change the direction when the transform works. You can set the transform to initial on :hover and set transition for the animation.
.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">
back
</div>
<div class="container">123</div>