Rotating text

by Laurel Bruggeman

HTML

<div class="rotating-text">
  <div class="one">
  something written here
  </div>
  <div class="two">
  another thing
  </div>
</div>

SCSS

.rotating-text {
  line-height: 22px;
  position: relative;
  padding: 10px;

  .one, .two {
    height: 1em;
    transform-origin: bottom center -0.5em;
    transition: all .3s ease;
  }
  
  .two {
    margin-top: -1.2em;
    visibility: hidden;
    transform: rotateX(90deg);
  }
  
  &:hover {
    cursor: default;
    
    .one {
      visibility: hidden;
      transform: rotateX(-90deg);
    }
    .two {
      visibility: visible;
      transform: rotateX(0);
    }
  }
}