how to properly rotate a section / div in a grid-design

Question

SYNOPSIS

I'm trying to take a multi-piece banner that sits horizontally on the top of the page when viewed in a reasonably sized window on a desktop / laptop / tablet and rotate it (-90deg) so that it appears vertically on the left-side of the page when viewed on a small screen (e.g.: phone).

This is kind of a follow-on from a previous idea - where I switched between two different banners and had the text in the banner go vertically down without rotating them. There are some issues with that solution such that I'd like to see if I could just rotate the horizontal banner I have (with some minor mods)

I found a similar concept here - with this jsfiddle demo, but couldn't seem to get it to work for me.

.rotateObj h2 span {
    width:150px; /* same as height of .rotateObj */
    -webkit-transform-origin:84px 70px;
    display:inline-block;
    -webkit-transform:rotate(-90deg);
    text-align:center;
}

SOME BACKGROUND

• This is a grid design
• This is [trying to be] a responsive design

• An example of what I've got so far can be found on jsfiddle

  #h_banner {
      grid-column: 1/2;
      grid-template-columns: 80px auto 80px 80px;
      -ms-transform: roate(-90deg) translate(-150px, -10px);
      -webkit-transform: rotate(-90deg) translate(-150px, -160px);
      transform: rotate(-90deg) translate(-150px, -160px);
      position: fixed;
  }
  

• If you make the "result" section wide, you should see the horizontal banner, which scales reasonably well with the width of the window and doesn't get affected by changes in height.

• If you make the "result" section narrow, you should see what I have with respect to the rotated banner, however the positioning is ad-hoc and IS affected by changes in height.
• That CSS code starts on line 55; the rotation is being attempted starting on line 67.
• The rotate part works as expected, but it doesn't stay where I want it, so I had to add a translation, but the value for the translation was hit-or-miss and is probably why the height affects it.

MY HOPE

I'm hoping someone here can help me figure out how fix this. I think if I/we can get the rotated section to land in the right place, the rest of it I should be able to tweak as needed.

Answer 1

You need to also consider transform-origin and you can do it like this:

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

Full code:

body {
  padding: 0;
  margin: 0;
}

#page {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 200px auto;
}

#header {
  grid-column: 1/3;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 200px auto;
}

#logo {
  grid-column: 1/2;
  grid-row: 1/2;
  place-self: center;
  border: 2px solid red;
  position: fixed;
}

#h_banner {
  grid-column: 1/3;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 200px auto 200px;
  background: gray;
  z-index: 10;
}

#banner_h {
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  font-size: 6vw;
  place-self: center;
  grid-column: 2/3;
  grid-row: 1/2;
}

#ban_img_left {
  grid-column: 1/2;
  grid-row: 1/2;
  place-self: center;
}

#ban_img_right {
  grid-column: 3/4;
  grid-row: 1/2;
  place-self: center;
}

#menu {
  display: none;
}

#main {
  grid-column: 2/3;
  grid-row: 2/3;
}

@media only screen and (max-width: 1000px) and (max-height: 2000px) {
  /* [smaller] iPhone portrait */
  #page {
    grid-template-columns: 80px auto;
    grid-template-rows: auto;
  }
  #header {
    grid-column: 1/2;
    grid-template-columns: auto;
    grid-template-rows: auto;
  }
  #logo {
    display: none;
  }
  #h_banner {
    grid-column: 1/2;
    grid-template-columns: 80px auto 80px 80px;
    transform: rotate(-90deg) translateX(-100%);
    position: fixed;
    transform-origin: top left;
  }
  position: fixed;
}

#banner_h {
  font-size: 5vh;
}

#menu {
  display: grid;
}

#main {
  grid-row: 1/3;
}


}
@media only screen and (max-width: 1000px) and (max-height: 500px) {
  /* [smaller] iPhone landscape */
  
  #banner_v {
    line-height: 3.5vh;
  }
}

<html>

<head>
  <title>Responsive Banner Tests</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="./forfiddle.css" />
</head>

<body>
  <section id="page">
    <section id="header">
      <div id="logo">LOGO</div>
      <div id="h_banner">
        <div id="ban_img_left">L_IMG</div>
        <div id="banner_h">
          Mumble &amp; Grumble
        </div>
        <div id="ban_img_right">R_IMG</div>
        <div id="menu">MENU</div>
      </div>
      <!-- h_banner -->
    </section>
    <!-- header -->
    <section id="main">
      <p>Mary had a little lamb, whose fleece was white as snow<br/>and every where that Mary went her lamb was sure to go</p>
      <p>Humpty Dumpty sat on a wall, Humpty Dumpty had a great fall<br/>All the King's horses and all the King's mend<br/>Couldn't put him back together again</p>
      <p>Home for the deranged, where the beer and the cantaolpe play<br/>Where pink elepants roam<br/>on the walls of your home<br/>and the flies are all rowdy all day</p>
      <p>Yippie dippie dee<br/>An apple climbed a tree<br/>He dropped his pants<br/>and fell in a trance<br/>Yippie dippie dee</p>
      <p>In case you were wondering this is all just filler text to try to ensure that the window can be scrolled verticlally to verify that the horizontal header banner scrolls correctly, leaving the logo visible.</p>
      <p>Also, we need to verify that when the screen is narrow (e.g.: like for a phone), that the horizontal banner and logo go away<br/>and are replacd by a vertical banner that stays fixed in place.</p>
      <p>In both cases, we want to make sure that the text in the banner scales according to width/height</p>
      <p>And now, we repeat all of the above...</p>
      <p>Mary had a little lamb, whose fleece was white as snow<br/>and every where that Mary went her lamb was sure to go</p>
      <p>Humpty Dumpty sat on a wall, Humpty Dumpty had a great fall<br/>All the King's horses and all the King's mend<br/>Couldn't put him back together again</p>
      <p>Home for the deranged, where the beer and the cantaolpe play<br/>Where pink elepants roam<br/>on the walls of your home<br/>and the flies are all rowdy all day</p>
      <p>Yippie dippie dee<br/>An apple climbed a tree<br/>He dropped his pants<br/>and fell in a trance<br/>Yippie dippie dee</p>
      <p>In case you were wondering this is all just filler text to try to ensure that the window can be scrolled verticlally to verify that the horizontal header banner scrolls correctly, leaving the logo visible.</p>
      <p>Also, we need to verify that when the screen is narrow (e.g.: like for a phone), that the horizontal banner and logo go away<br/>and are replacd by a vertical banner that stays fixed in place.</p>
      <p>In both cases, we want to make sure that the text in the banner scales according to width/height</p>
      <p>And now, we repeat all of the above...</p>
      <p>Mary had a little lamb, whose fleece was white as snow<br/>and every where that Mary went her lamb was sure to go</p>
      <p>Humpty Dumpty sat on a wall, Humpty Dumpty had a great fall<br/>All the King's horses and all the King's mend<br/>Couldn't put him back together again</p>
      <p>Home for the deranged, where the beer and the cantaolpe play<br/>Where pink elepants roam<br/>on the walls of your home<br/>and the flies are all rowdy all day</p>
      <p>Yippie dippie dee<br/>An apple climbed a tree<br/>He dropped his pants<br/>and fell in a trance<br/>Yippie dippie dee</p>
      <p>In case you were wondering this is all just filler text to try to ensure that the window can be scrolled verticlally to verify that the horizontal header banner scrolls correctly, leaving the logo visible.</p>
      <p>Also, we need to verify that when the screen is narrow (e.g.: like for a phone), that the horizontal banner and logo go away<br/>and are replacd by a vertical banner that stays fixed in place.</p>
      <p>In both cases, we want to make sure that the text in the banner scales according to width/height</p>
      <p>And now, we repeat all of the above...</p>
      <p>Mary had a little lamb, whose fleece was white as snow<br/>and every where that Mary went her lamb was sure to go</p>
      <p>Humpty Dumpty sat on a wall, Humpty Dumpty had a great fall<br/>All the King's horses and all the King's mend<br/>Couldn't put him back together again</p>
      <p>Home for the deranged, where the beer and the cantaolpe play<br/>Where pink elepants roam<br/>on the walls of your home<br/>and the flies are all rowdy all day</p>
      <p>Yippie dippie dee<br/>An apple climbed a tree<br/>He dropped his pants<br/>and fell in a trance<br/>Yippie dippie dee</p>
      <p>In case you were wondering this is all just filler text to try to ensure that the window can be scrolled verticlally to verify that the horizontal header banner scrolls correctly, leaving the logo visible.</p>
      <p>Also, we need to verify that when the screen is narrow (e.g.: like for a phone), that the horizontal banner and logo go away<br/>and are replacd by a vertical banner that stays fixed in place.</p>
      <p>In both cases, we want to make sure that the text in the banner scales according to width/height</p>
      <p>And now, we repeat all of the above...</p>
    </section>
    <!-- main -->
  </section>
  <!-- page -->
</body>

</html>