body { margin: 0; width: 100%; height: 100vh; position: relative; } #wrapper { display: flex; justify-content: center; background: yellow; transform: rotate(-90deg); position: absolute; left: 0; } #wrapper svg {margin: 1rem} text {font-size: 1rem}
<!-- THIS IS THE YELLOW BLOCK CONTAINING THE SVG ELEMENTS --> <div id="wrapper"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40"> <rect class="masker" x="0" y="0" width="120" height="40" fill="red" /> <text x="16" y="25" fill="white">Some Text 1</text> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40"> <rect class="masker" x="0" y="0" width="120" height="40" fill="red" /> <text x="16" y="25" fill="white">Some Text 2</text> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40"> <rect class="masker" x="0" y="0" width="120" height="40" fill="red" /> <text x="16" y="25" fill="white">Some Text 3</text> </svg> </div>
#wrapper { ... transform: rotate(-90deg) translate(-100%, 0); transform-origin: top left; ... }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)