css - 图像旋转 - 图像剪切

Question

当我使用rotate(90)旋转图像时，即使容器具有overflow: auto，图像的顶部也会被切断。

#container {
  width: 100%;
  overflow: auto;
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

<div id="container">
  <img src="https://dummyimage.com/2048x1024/000/fff" id="image" class="rotate90" alt="">
</div>

示例:https://jsfiddle.net/dh0o6vz3/3/

有没有办法改变容器的CSS，使其溢出到图像上方和下方？

Answer 1

您需要使用overflow:visible，并且您还可以根据您想要显示图像的方式更改变换原点

#container {
  width: 100%;
  overflow: visible;
  border: 1px solid;
}

.rotate90 {
  transform: rotate(90deg);
  transform-origin: bottom;
}

<div id="container">
  <img src="https://dummyimage.com/248x124/000/fff" id="image" class="rotate90" alt="">
</div>