Вертикальное размещение изображения выводит мой документ из потока документов

Я пытаюсь разместить изображение по вертикали в левой части экрана (а не вертикальное выравнивание в div).

Я добился этого с помощью transform: rotate(270deg), но как только я кладу это свойство transform в моем CSS, он принимает div из потока. Затем я использовал position (top, left, bottom, right) и использовал некоторые сумасшедшие значения, такие как -1800px... чтобы привести мой div (с изображением) туда, где я хотел (слева, вертикально)

Проблема в том, что когда я уменьшаю масштаб, моя страница выглядит уродливой. Может кто-нибудь, пожалуйста, предложите мне способ вертикально разместить изображение, но все же склонны к увеличению или уменьшению масштаба

HTML:

<div class="leftSideLogo">
  <h1>Left side logo</h1>
  <img src="images/google_logo.png" alt="logo" />
</div>

CSS:

.leftSideLogotest
{
    float: left;
    width: 15%;
    transform: rotate(-90deg);
    transform-origin: top top;
    transform-style: preserve-3d;       
    background-color: red;
    background-image: url("../images/google_logo.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left center;
}

.leftSideLogo
{
    //float: left;
    background-color: red;
    width: 100%;
    height: 130%;
    position: absolute;
    top: 375px;
    left: -500px;
    background-image: url("../images/google_logo.png");
    background-size: 70% 70%;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-90deg);
    //transform: scale(1,1);
    //z-index: +1;
}

.leftSideLogo img
{
    height: 100px;
    width: 80%;
    position: absolute;
    top: 30px;
}