CODEWITHSUNDEEP
css
Maik Lowrey
Maik Lowrey

Reputation: 17586

CSS hover should rotate vertical text to horizontal

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">
    <a href="/">back</a>      
</div>
<div class="container">123</div>

Upvotes: 0

Views: 720

Answers (1)

RatajS
RatajS

Reputation: 1429

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">
    <a href="/">back</a>      
</div>
<div class="container">123</div>

Upvotes: 1

Related Questions