图像的垂直放置使我的div不受文档流

Question

我试图将图像垂直放置在屏幕的左侧（而不是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;
}

Answer 1

这是你想要得到的吗？请参阅以下演示（以及内部评论）。

＆＃13;

＆＃13;

var links = [
  {source: nodes[0], target: nodes[2]},
  {source: nodes[1], target: nodes[3]},
  {source: nodes[2], target: nodes[4]},
  {source: nodes[2], target: nodes[5]},
  {source: nodes[3], target: nodes[5]},
  {source: nodes[4], target: nodes[0]},
  {source: nodes[5], target: nodes[1]}
]

＆＃13;

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*/
}

＆＃13;

＆＃13;

＆＃13;

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