跨浏览器使用transform的方法:scale css属性？

Question

我有以下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);

我打算将其应用于div,以便将其缩放,包括其所有内容,图像等,其大小保持50%,同时保持相同的中心.你可能知道我列出的规则正是如此,除了IE7-8.

根据该网站,等效的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');

然而,这些似乎并没有实际调整div的内容,它似乎改变了它的位置,但这就是全部.

CSS3Please.com报告不同的矩阵值是等效的(0.5):

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

我已经测试了这些,但效果是一样的; div似乎改变了它的位置,但其内容的实际大小保持不变.

最后我尝试了transformie.js,它在你指定transform属性时自动通过sylvester.js计算矩阵,但最终结果仍然是:

M11=0.5, M12=0, M21=0, M22=0.5

与我先尝试的那个完全一样,除了改变div的位置之外,它似乎什么也没做.

我会尝试cssSandpaper.js,但它看起来相当臃肿我打算做什么,加上没有jQuery端口,我不想只为此项目添加cssQuery.机会是结果与transformie.js生成的结果相同,因为它似乎也使用sylvester.js.

编辑:我也试过这个似乎直接来自微软,并建议以下矩阵计算方法:

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;
}  

不幸的是,这也没有扩展div本身的内容.看起来这可能根本不可能,但是:

如何transform: scale在IE8-7中模拟现代,以实际调整内部div内容的大小？

也许我正在寻找一些不存在的东西,但我想确定一下.所有测试都是在IE8和IE7的兼容模式下使用IE9完成的(到目前为止,它总是完成这项工作,我不相信它不可靠但如果您认为不正确,请随时纠正我)

Answer 1

我对你的解释有点困惑。IE7-8 中的这个小提琴为我缩小了内部元素，与您发布的第一组代码很好（尽管您表明它没有缩放，只是改变了位置）。该代码没有做（也不能做）的是从中心点（它是从左上角）缩放它，并且矩阵变换不能适应平移（它只是“调整大小，旋转或反转对象的内容” ”），所以它不是“保持相同的中心”，正如你所表明的那样。

我发现有一个页面与您在执行转换时注意到的transformie.js类似，但另一个页面谈到了转换原点居中的问题。最终，为了获得在中心缩放的外观，您必须包括某种计算以使用 进行元素的移动position: relative。

在这个小提琴width中，我通过在包装上设置div并height根据内部尺寸了解 ，使自己可以轻松地手动进行这样的计算。对于任何动态调整大小，这可能会变得复杂，但我相信上面的链接也提供了使用 javascript (JQuery) 和 sylvester.js 动态执行此操作的计算。