Search code examples
javascripthtmljquerycsspositioning

positioning div after it has been rotated

I would like to make a div with 3 texts, rotate it and place it on a fixed spot on the page. I would like it to perfectly fit the size of the screen,

like this

So I created a div which height and width were the opposite of what I need then I rotated it. The thing is that I'm having problems positioning it correctly on the spot I want. (top:0 right:40px)

This is my code where I tried to move the div around.

.page {
  width: 100%;
  heigth: 100%;
  background-color: #fefefe;
}
.green-band {
  height: 90px;
  width: 100vh;
  padding: 0 30px;
  background-color: green;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: rotate(-90deg);
  position: fixed;
  top: 0;
  right: 40px;
}
<div class="page"></div>
<div class="green-band">
  <div class="text-inside">Text 1</div>
  <div class="text-inside">Text 2</div>
  <div class="text-inside">Text 3</div>
</div>

Can you help me figuring out how to correctly position the div?

Solution 

  • .page {
  width: 100%;
  heigth: 100%;
  background-color: #fefefe;
}
.green-band {
  height: 90px;
  width: 100vh;
  padding: 0 30px;
  background-color: green;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateX(calc(100% - 40px)) rotate(-90deg);
  transform-origin: bottom left;
  position: fixed;
  bottom: 0;
  right: 0;
}
    <div class="page"></div>
<div class="green-band">
  <div class="text-inside">Text 1</div>
  <div class="text-inside">Text 2</div>
  <div class="text-inside">Text 3</div>
</div>