动态计算css翻译属性值

我想缩放（X）的子div元素，以适应窗口调整大小的父div。我通过除以父宽度和子宽度来计算比例尺，并且它完美地工作。动态计算css翻译属性值

但对齐不正确。最初我设置了我的子div边距 - 从父div离开50 px。它不在规模上维护。

这是HTML/CSS代码

#wrap { 
    margin-left:50px; 
    width:300px; 
    height:300px 
} 
#parentDiv { 
    width:500px 
     height:300px; 
} 

    <body> 
     <div id="parentDiv"> 
     <div id="wrap">   
      <img id="image" width="300px" src="http://placekitten.com/640/480" /> 
     </div> 
     </div>  
    </body>

这是js代码在大规模的调整

window.onresize = function() { 
    scaleDiv(); 
    }; 

scaleDiv = function() { 
    parentWidth = $('#parentDiv').width(); 
    scale = (parentWidth)/$('#wrap').width(); 
    new_width = $('#wrap').width() *  scale; 
    $('#wrap').css('-webkit-transform', ' scaleX(' + scale + ')'); 
}

一些google搜索后，我才知道，我可以使用translateX属性保持原来的对齐。但是我感到如何计算翻译价值。

$('#wrap').css('-webkit-transform', 'translateX(20%)' + ' scaleX(' + scale + ')');

我把翻译道具上的随机值20％，它不正确。有人能帮助我怎么理解这个价值。

这是jsfiddle test link

来源

2013-03-15 RameshVel

不太清楚你想达到什么样的 - 你想确保利润率保持其距左边50px？如果是这样，应用'-webkit-transform-origin：0 0;'到'＃wrap'。 – Graham 2013-03-15 11:18:55

其他解决方案，但不好：http://jsfiddle.net/4r8WZ/16/ – 2013-03-15 11:28:34

@格拉汉姆，谢谢。那正是我想要的。请将其添加为答案，以便我可以接受。 – RameshVel 2013-03-15 11:31:05

你需要指定转换原点;默认情况下，这是设置为50％和0％，但是你可以用transform-origin财产像这样覆盖它：

#wrap { 
    -webkit-transform-origin:0 0; 
    -moz-transform-origin:0 0; 
    -ms-transform-origin:0 0; 
    transform-origin:0 0; 
}

来源

2013-03-15 11:34:19 Graham

动态计算css翻译属性值

回答

相关问题