CSS hover state issue when adding letter spacing on a 90deg text - html

Question

When I hover the p tag and add a letter-spacing on it, it messes up the entire text. I wanted to hover it and it stays in the same position with the letter-spacing on it.
#text {
position: absolute;
transform: translate(-50%, -50%);
left: 40%;
top: 50%;
font-size: 2em;
transform: rotate(90deg);
}
#text:hover {
letter-spacing: 10px
}
<p id="text">sample text rotation</p>

Answer 1

Just add white-space: nowrap
BTW, your second transform rewrites the first one.
The correct use is transform: translate(-50%, -50%) rotate(90deg);
#text {
position: absolute;
transform: translate(-50%, -50%) rotate(90deg);
left: 40%;
top: 50%;
font-size: 2em;
white-space: nowrap;
}
#text:hover {
letter-spacing: 10px
}
<p id="text">sample text rotation</p>

Answer 2

The flickering happens because the transform-origin is wrong. You're rotating the text, so you should take the original transform-origin into account (which is from left to right).
See this updated code snippet for the result.
.text {
position: absolute;
transform-origin: top left;
left: 70%;
top: 20%;
font-size: 2em;
transform: rotate(90deg);
}
.text:hover {
letter-spacing: 10px;
}
<p class="text">sample text rotation</p>

Answer 3

Couple of things:
You have 2 transform tags on your css
You still will need more spacing padding so the hover is not flickering
Also Im sure you wanted a transition so try this:
#text {
transition: letter-spacing 0.5s;
}
#text {
display: block;
padding: 0;
position: absolute;
left: 40%;
top: 50%;
font-size: 2em;
transform: translate(-50%, -50%) rotate(90deg);
transition: letter-spacing 0.5s;
}
#text:hover {
letter-spacing: 10px
}
<p id="text">sample text rotation</p>
You will probably need more block /width /spacing so it can get the right setup but thats all you...