動態計算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翻譯屬性值

回答

相關問題