旋转 div 但防止在窗口边框溢出答案

【问题标题】：Rotate div but prevent overflow at window borders旋转 div 但防止在窗口边框溢出
【发布时间】：2014-01-20 12:18:51
【问题描述】：

我想将 div 旋转 7 度。这个 div 虽然应该填充整个空间左、右和底部。像这样：

 _____________________
|                     | <- body
|                  __-| <- rotated div border
|            __----   |
|      __----         |
|__----               | <- rotated div
|                     |
|                     |
|---------------------| <- window bottom
|        scroll       | 
|          |          |
|          v          | <- still rotated div filling the space
|_____________________|

您应该能够向下滚动，而您应该不能够向右滚动。

有没有 html/css 解决方案？或者我需要 jquery 什么的？

编辑：旋转后的 div 实际上并不需要将所有空间填充到底部。可能有第二个（重叠）未旋转的 div 这样做。

【问题讨论】：

到目前为止你尝试过什么？另外，你有你现在在哪里的例子吗？现在有点陷入黑暗..
创建jsfiddle.net
这将有助于了解 div 中是否有内容，或者它是否只是为了看起来很时髦和对角线。你看，这让事情变得非常复杂。

标签： javascript jquery html css transform

【解决方案1】：

在不确切知道这是什么的情况下，很难预测你想要什么，但是做出几个假设是不可能的。

重新读取任何旋转量都需要您放大旋转的 div 以填充整个宽度。所需的精确缩放量取决于 div 的高度；使用 CSS 无法进行的计算。

【讨论】：

【解决方案2】：

我喜欢你的图表！我在jsfiddle* 中复制了它，但我不确定这是否正是您想要的。我只是让内部 div 比包含 div 宽，然后设置overflow: hidden;。这是一个非常混乱的解决方案，如果您在 div 的下部有重要的东西，它将无法工作。你可能会更好地使用一些 javascript 来调整规模等......

你可以检查css：

.container {
    background-color: blue;
    height: 500px;
    width: 300px;
    overflow:hidden;
}

.inner {
  background-color: #FF0000;
  height: 100%;
  position: relative;
  top: 100px;
  transform: rotate(7deg);
  transform-origin: 0 0 0;
  width: 150%;
  padding: 10px;
}

我自己只是在学习转换，所以我希望这至少有点帮助。

* 右侧有一个滚动条仅：fiddle。这是通过让一个带有overflow:hidden 和另一个带有overflow:auto 和适当宽度/高度的外部div 来实现的。

【讨论】：