Rotating text and aligning it in CSS?

I think that this is what you are going for, but you can change the transform origin using transform-origin (with related vendor prefixes as needed). This is situational, but in your case:

transform: rotate(90deg) translateX(100%);
transform-origin: 100% 100%;

enter image description here

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
}
.text{
  position: absolute;
  width: 100%;
  background:rgba(0,0,0,0.5);
  color:#fff;
  -webkit-transform: rotate(270deg) translateX(-100%);
          transform: rotate(270deg) translateX(-100%);
  -webkit-transform-origin: 0px 0px;
          transform-origin: 0px 0px;
}
.image img{
  vertical-align:middle;
}
<div class="wrapper">    
  <div class="text">
    Text to rotate
  </div>
  <div class="image">
    <img src="http://lorempixel.com/100/100"/>
  </div>
</div>


To rotate text simply:

.container {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

Then set it in a CSS grid so it can track the viewport using sticky if you want it to move on scroll.

Tags:

Css

Recent Posts