使用transform:scale css 属性的跨浏览器方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11714434/
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
Cross-browser method of using the transform:scale css property?
提问by Mahn
I have the following css rules:
我有以下 css 规则：
-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
-moz-transform: scale(0.5); /* FF3.5+ */
-ms-transform: scale(0.5); /* IE9 */
-o-transform: scale(0.5); /* Opera 10.5+ */
transform: scale(0.5);
Which I intend to apply to a div in order to scale it, including all its contents, images, etc, to 50% its size while keeping the same center. As you probably know the rules I listed do exactly that, except for IE7-8.
我打算将其应用于 div 以将其（包括其所有内容、图像等）缩放到其大小的 50%，同时保持相同的中心。您可能知道我列出的规则就是这样做的，除了 IE7-8。
According to this site, the equivalent, MS proprietary rule would be:
根据此站点，等效的 MS 专有规则是：
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.5,
M12=0,
M21=0,
M22=0.5,
SizingMethod='auto expand');
However these don't seem to actually resize the contents of the div, it seems to shift its position but that is all.
然而，这些似乎并没有真正调整 div 内容的大小，它似乎改变了它的位置，但仅此而已。
CSS3Please.comreports different matrix values to be the equivalent for scale(0.5):
CSS3Please.com报告不同的矩阵值与 scale(0.5) 等效：
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
I've tested these aswell, but the effect was the same; the div seemed to change its position, but the actual size of its contents remained unchanged.
我也测试过这些，但效果是一样的；div 似乎改变了它的位置，但其内容的实际大小保持不变。
Finally I've tried transformie.js, which calculates the matrix via sylvester.jsautomatically as you assign the transform property, but the end result was still:
最后，我尝试了transformie.js，它会在您分配 transform 属性时通过sylvester.js自动计算矩阵，但最终结果仍然是：
M11=0.5, M12=0, M21=0, M22=0.5
Exactly the same as the one I tried first, which seemingly did do nothing other than shift the position of the div.
与我第一次尝试的完全相同，除了移动 div 的位置外，它似乎什么也没做。
I wouldtry cssSandpaper.js, but it looks pretty bloated for what I intend to do, plus there's no jQuery port and I don't feel like adding cssQuery to the project only for that. Chances are the results would be the same as what transformie.js generates though, because it seems to use sylvester.js aswell.
我会尝试使用cssSandpaper.js，但对于我打算做的事情来说它看起来很臃肿，而且没有 jQuery 端口，我不想只为此将 cssQuery 添加到项目中。结果可能与 transformie.js 生成的结果相同，因为它似乎也使用 sylvester.js。
Edit: I also tried thiswhich seems to come from microsoft directly, and suggests the following matrix calculation method:
编辑：我也试过这似乎直接来自微软，并建议以下矩阵计算方法：
function resizeUsingFilters(obj, flMultiplier) {
// If you don't do this at least once then you will get an error
obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
// Resize
obj.filters.item(0).M11 *= flMultiplier;
obj.filters.item(0).M12 *= flMultiplier;
obj.filters.item(0).M21 *= flMultiplier;
obj.filters.item(0).M22 *= flMultiplier;
}
Unfortunately this does not scale the contents of the div itself either. It looks like this may not be possible at all, but:
不幸的是，这也不会缩放 div 本身的内容。看起来这可能根本不可能，但是：
How can the modern transform: scalebe simulated in IE8-7, in such a way that it actually resizes inner div contents aswell?
如何transform: scale在 IE8-7 中模拟现代，使其实际上也调整内部 div 内容的大小？
Perhaps I'm looking for something that doesn't exist, but I wanted to be sure. All the tests have been done using IE9 in compatibility mode for IE8 and IE7 (so far it has always done the job, I don't believe it's unreliable but feel free to correct me if you think otherwise)
也许我正在寻找不存在的东西，但我想确定一下。所有的测试都是在 IE8 和 IE7 的兼容模式下使用 IE9 完成的（到目前为止它一直可以完成这项工作，我不认为它不可靠，但如果您有其他想法，请随时纠正我）
采纳答案by ScottS
I'm a little confused by your explanation. This fiddlein IE7-8 scales the inner elements down for me just fine with the first set of code you posted(though you indicate it was not scaling, only changing position). What that code does notdo (and cannot do) is scale it from the center point (it is from the upper left), and the matrix transform cannot accommodate a translation (it only "Resizes, rotates, or reverses the content of the object"), so it is not "keeping the same center" as you indicate you desire.
我对你的解释有点困惑。IE7-8 中的这个小提琴使用您发布的第一组代码对我来说缩小了内部元素（尽管您表示它没有缩放，只是改变了位置）。什么代码并没有做（和不能做）是从所述中心点（它是从左上方）规模它，并且矩阵变换不能容纳平移（它只“调整大小，旋转，或反转对象的内容")，所以它不是“保持相同的中心”，正如您所表示的那样。
There is a page I found similar to the transformie.jsyou noted in performing transform, but this other pagespeaks to the issue of the transform origin being centered. Ultimately, to get the appearance of being scaled on center, you must include a calculation of some kind to do a shift of the element using position: relative.
有一个页面，我发现类似transformie.js您执行变换指出，但这种其他网页说，以改造起源问题为中心。最终，为了获得在中心缩放的外观，您必须包括某种计算以使用position: relative.
In this fiddleI've made it easy on myself to do such a calculation manually by setting a widthon the wrapping divand knowing the heightbased on the inner sizes. This could get complicated with any dynamic sizing, but the link aboveI believe gives the calculations to do it dynamically using javascript (JQuery) with the sylvester.js as well.
在这个小提琴中，我通过width在包装上设置 adiv并了解height基于内部尺寸的，让我自己轻松地手动进行这样的计算。这可能会因任何动态调整大小而变得复杂，但我相信上面的链接也提供了使用 javascript (JQuery) 和 sylvester.js 进行动态计算的计算。
回答by Zoltan Hawryluk
You can also use IE's zoom property:
您还可以使用 IE 的缩放属性：
zoom: 0.5
变焦：0.5
This should do what you want it to do.
这应该做你想要它做的事情。
