Вам также необходимо учитывать transform-origin, и вы можете сделать это следующим образом:
transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;
Полный код:
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 & 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>