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

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

根据this site,等效的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.

编辑:我也尝试了this,它似乎直接来自微软,并建议以下矩阵计算方法:

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本身的内容.看起来这可能根本不可能,但是:

如何在IE8-7中模拟现代变换:缩放,以实际调整内部div内容的大小?

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

你的解释让我有些困惑.使用你发布的第一组代码,IE7-8中的 This fiddle可以很好地缩小内部元素(尽管你指出它不是缩放,只是改变位置).该代码不做(也做不到)的是从中心点(它是从左上角)缩放它,矩阵变换不能容纳翻译(它只有 “Resizes, rotates, or reverses the content of the object”),所以它不是“保持相同的中心” “正如你表明你的愿望.

我发现有一个页面类似于你在执行变换时注意到的transformie.js,但是this other page说明了变换原点居中的问题.最终,要获得在中心缩放的外观,您必须包含某种计算,以使用position:relative进行元素的移位.

this fiddle,我通过在包装div上设置宽度并根据内部尺寸知道高度,手动完成这样的计算.这可能会因任何动态大小调整而变得复杂,但是the link above我认为使用javascript(JQuery)和sylvester.js动态地进行计算.

相关文章
相关标签/搜索