Html 使用 CSS3 变换后的溢出行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21248111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow behavior after using CSS3 transform
提问by Siddiqui
Please check the demo
请检查演示
I have two divs the first divis used for showing the scroll-bar and the second divis used for the rotation of inner contents of the div.
我有两个divs，第一个div用于显示滚动条，第二个div用于旋转div.
My question is why scroll-bar is showing even if there is no overflow of the inner contents.
我的问题是为什么即使内部内容没有溢出也会显示滚动条。
Please check the demo and tell me what I am doing wrong here and how to overcome this issue or any alternative way to achieve this.
请检查演示并告诉我我在这里做错了什么以及如何克服这个问题或实现这一目标的任何替代方法。
HTML
HTML
<div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">
<div id="RotationDiv">
<img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" />
</div>
</div>
CSS
CSS
#RotationDiv {
-ms-transform-origin: 539px 539px;
-webkit-transform-origin: 539px 539px;
width: 434px;
height: 1096px;
overflow: visible;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
background-color:Red;
}
回答by Mr. Alien
You are using transformso it changes visual formatting model of an element.
您正在使用，transform因此它会更改元素的视觉格式模型。
From MDN:
来自MDN：
The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.
CSS transform 属性允许您修改 CSS 视觉格式模型的坐标空间。使用它，元素可以根据设置的值进行平移、旋转、缩放和倾斜。
A line again from MDN:
再次来自MDN的一行：
By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.
通过修改坐标空间，CSS 变换可以在不中断正常文档流的情况下更改受影响内容的位置和形状。本指南介绍了如何使用转换。
From W3C: 2 Module Interactions
来自W3C：2 模块交互
This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting modelfrom [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.
该模块定义了一组 CSS 属性，这些属性会影响应用这些属性的元素的视觉呈现；这些效果在元素根据[CSS21] 中的可视化格式模型调整大小和位置后应用。这些属性的某些值会导致创建包含块和/或创建堆叠上下文。
So you have a parent element with the dimensions below.
所以你有一个尺寸如下的父元素。
width: 1096px;
height: 434px;
Now you are transforming that element using
现在您正在使用
-webkit-transform: rotate(90deg);
So here, the element transforms visually, but not literally, in other words though you transform an element, it takes the space physically on a document just like a static element takes, it just visually transforms the element. I will share a diagram which will make you understand in a better way..
所以在这里，元素在视觉上进行了变换，但不是字面上的变换，换句话说，虽然你变换了一个元素，它会像静态元素一样占用文档上的物理空间，它只是在视觉上变换元素。我将分享一个图表，让您更好地理解..
So though you transformed your element like this, but still the vertical space was taken up because of the heightof your transformed element, which did transformed visually, but not literally...
因此，尽管您像这样转换了元素，但由于height转换后的元素，垂直空间仍然被占用，它确实在视觉上发生了变化，但不是字面上的……
So, now what's the solution? Use position: absolute;on the child element, and anyways you are using position: relative;on the parent.
那么，现在有什么解决办法呢？使用position: absolute;的子元素，并反正你正在使用position: relative;的父。
#RotationDiv {
-ms-transform-origin: 539px 539px;
-webkit-transform-origin: 539px 539px;
width: 434px;
height: 1096px;
position: absolute;
overflow: visible;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
background-color:Red;
}
Lets have a test case, I've the styles like below
让我们有一个测试用例，我有下面的样式
.parent .transformed {
height: 200px;
width: 200px;
background: #f00;
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
-moz-transform-origin: 300px 300px;
-webkit-transform-origin: 300px 300px;
transform-origin: 300px 300px;
}
.parent .static {
background: #00f;
height: 200px;
width: 200px;
}
Here, I am transforming an element having classof .transformedso if you see, the element does transformand am also modifying the origin, but the next box won't move up, as the transformed element take up literal space in the flow, it doesn't get out of the flow like position: absolute;does, but well that's the separate concept.
在这里，我转化具有元素class的.transformed，所以如果你看到，该元素确实transform和我也改变出身，但下一个框不会往上移，作为转换元件占用空间的文字在流动，这不像position: absolute;做一样摆脱流动，但那是单独的概念。
So you need to use position: absolute;or your divwill still take up space vertically and thus you see that scroll bar ...
所以你需要使用position: absolute;或者你div仍然会垂直占用空间，因此你会看到滚动条......
Poopy IE Compatible Solution
Poopy IE兼容解决方案
As you commented, well, yes, IE will still show the scroll bar as the element which is positioned absolutestill exists in the same dimensions, so what's the workout here?
正如你所评论的，嗯，是的，IE 仍然会显示滚动条，因为定位的元素absolute仍然存在于相同的维度中，那么这里的锻炼是什么？
Firstly, you are transforming the element to set in the parent container, also, you don't need the
overflowso the first question is if you don't needoverflowthan why useauto? You can usehidden.If not
hiddento the parent, and you are looking forward to place some content beneath the transformed element, than better you wrap the transformed element inside another element with the same dimensions set tooverflow: hidden;and make sure you move theposition: absolute;property to this block. - DemoIf still not happy? Then why
transformentire element?transformrelevant image only - Demo
回答by Ruddy
This is because it is still using the vertical properties (Just as hmore009 said in the comments).
这是因为它仍在使用垂直属性（正如 hmore009 在评论中所说）。
If we take a look here you can see what its doing so you know this is true.
如果我们看一下这里，您可以看到它在做什么，因此您知道这是真的。
Example 1:
示例 1：
So your height and width for the container are as follows:
所以你的容器的高度和宽度如下：
width: 1096px;
height: 434px;
Now you have done the right thing and swap them for the transform #RotationDiv:
现在你已经做了正确的事情并将它们交换为转换#RotationDiv：
width: 434px;
height: 1096px;
This works fine if we were to change the container to overflow: hidden;this means we cant see any extra height.
如果我们将容器更改为overflow: hidden;这意味着我们看不到任何额外的高度，这可以正常工作。
Example 2:
示例 2：
But I guess for some reason you don't want to do that, probably due to not knowing why the overflow is caused. So lets take a closer look at what is going on.
但我想出于某种原因你不想这样做，可能是因为不知道为什么会导致溢出。因此，让我们仔细看看发生了什么。
If we remove the height from #RotationDivthe overflow is no longer there. Thats a bit wired isn't it? Well no, the height was was being used for both the transform and the vertical height.
如果我们从#RotationDiv溢出中移除高度，则不再存在。那有点有线不是吗？好吧，不，高度同时用于变换和垂直高度。
So how can we know it was the height causing this?
那么我们怎么知道是高度导致了这种情况呢？
Now if we give #RotationDivthe same height as the container we can see there is no overflow.
现在，如果我们给出#RotationDiv与容器相同的高度，我们可以看到没有溢出。
Now if we add 1pxonto that height we get the overflow kicking in. Hmm, so the height must be causing this. Even tho we are transforming the height seems to still be being used for the vertical height in the container.
现在，如果我们加上1px那个高度，我们就会开始溢出。嗯，所以高度一定是造成这种情况的原因。即使我们正在改变高度似乎仍然被用于容器中的垂直高度。
How can we fix this?
我们怎样才能解决这个问题？
Well we already have seen one option, give the container overflow: hidden;or just removing it altogether. This will stop the scrolling within the container.
好吧，我们已经看到了一种选择，给容器overflow: hidden;或完全移除它。这将停止容器内的滚动。
Or you could just get an image editor (there are some free online ones) and flip the image like that. Would save a lot of trouble doing it this way.
或者你可以得到一个图像编辑器（有一些免费的在线编辑器）并像这样翻转图像。这样做会省去很多麻烦。
Other then that you could flip the image only remove #RotationDivand give the container background: red;
除此之外，您只能翻转图像#RotationDiv并删除并提供容器background: red;
How I would do it still using transform:
我将如何仍然使用转换来做到这一点：
I would take off the overflow: auto;, remove the unneeded divand set the transform on the img.
我会取下overflow: auto;，删除不需要的div并在img.
It's up to you how you want to do it, there are many ways. The best way I would say it don't use transform and just flip the image using an image editor (e.g. Photoshop).
这取决于你想怎么做，有很多方法。我会说最好的方法是不使用变换，而只是使用图像编辑器（例如 Photoshop）翻转图像。
回答by FelixWang
well i was having trouble causing overflow too
好吧，我也遇到了导致溢出的问题
my problem was that horizontal scaling made horizontal overflow, so what i did was just change horizontal scaling to vertical scaling and it solved the problem (or bypassed the problem tbh)
我的问题是水平缩放导致水平溢出，所以我所做的只是将水平缩放更改为垂直缩放并解决了问题（或绕过了问题 tbh）
my understanding to this bug is that since it has no common solution, thus just go around it.
我对这个错误的理解是，由于它没有通用的解决方案，因此只需绕过它。
