Vertical placement of an image is taking my div out of flow of document

Question

I am trying to place an image vertically on the left side of screen (not vertical alignment in a div).

I have achieved this by using transform: rotate(270deg) , but as soon as I put this property transform in my CSS, it is taking the div out of flow. Then I used position (top, left, bottom, right) and used some crazy values like -1800px ... to bring my div (with the image) to where I wanted it (left side, vertically)

The problem is, when I zoom out, my page is looking ugly. Can someone please suggest me a way to keep vertically place the image, but still prone to zoom in or zoom out

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;
}

Answer 1

Is this what you were trying to get? See the demo follows (and comments inside).

 body { margin: 0; } .left-logo { background: url("//dummyimage.com/200x50") 0 0 no-repeat; width: 200px; /*max value of image size*/ height: 200px; /*max value*/ position: absolute; /*or fixed*/ left: 0; top: 0; transform: rotate(-90deg); } .main-area { background: gold; margin-left: 50px; /*min value*/ } 

 <div class="left-logo"></div> <div class="main-area">main area</div> 

JSFiddle: http://jsfiddle.net/7epwvjho/