如何修复旋转的img / div的宽度/高度？

Question

此示例显示2 div一个没有旋转另一个。旋转的图像会阻止文本。我如何重写这个以便文本没有被掩盖？

.Rotate {
  transform: translate(0, -100%) rotate(90deg);
  transform-origin: bottom left;
}

<div>
<img src="https://farm4.static.flickr.com/3010/4566263938_a56f24a24f.jpg"> <br/>
Can you see me?
</div>
<div>
<img class="Rotate" src="https://farm4.static.flickr.com/3010/4566263938_a56f24a24f.jpg"> <br/>
Can you see me?
</div>

Answer 1

你可以使用保证金来对齐它。

.Rotate {
  transform: rotate(90deg);
  margin:100px -90px;
}

<div>
<img src="https://farm4.static.flickr.com/3010/4566263938_a56f24a24f.jpg"> <br/>
Can you see me?
</div>
<div>
<img class="Rotate" src="https://farm4.static.flickr.com/3010/4566263938_a56f24a24f.jpg"> <br/>
Can you see me?
</div>

Answer 2

转换纯粹是可视化的...任何包装器保持相同的大小，浏览器会记住图像的位置并为其分配空间。

在翻译后将图像包装成正确尺寸的div，它就可以了。

＆＃13;

＆＃13;

.wrap {
  width: 300px;
  height: 460px;
  display: inline-block;
  background: red;
}
img {
  transform: translate(0, -100%) rotate(90deg);
  transform-origin: bottom left;
}

＆＃13;

<div class="block">
  <div class="wrap">
    <img src="http://www.fillmurray.com/460/300" alt="" />
  </div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

＆＃13;

＆＃13;

＆＃13;