动态计算css translate属性值

Question

动态计算css translate属性值

Ram*_*Vel 1 javascript css transform scale

我试图缩放(X)子div元素以适应窗口调整大小的父div.我通过除以父宽度和子宽度来计算缩放比例,并且它完美地工作.

但是对齐不合适.最初我设置了我的子div div-left 50 px from parent div.它没有按比例维持.

这是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>

Run Code Online (Sandbox Code Playgroud)

这是在调整大小时缩放的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 + ')');
}

Run Code Online (Sandbox Code Playgroud)

经过一些谷歌搜索,我才知道我可以使用translateX属性来保持对齐原始.但我很惊讶如何计算翻译价值.

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

Run Code Online (Sandbox Code Playgroud)

我把随机值20%放在翻译道具上,不合适.有人可以帮助我如何解决这个价值问题.

这是jsfiddle测试链接

Answer 1

Gra*_*ham 5

您需要指定变换原点; 默认情况下,它设置为50%和0%,但您可以使用如下transform-origin属性覆盖它:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，10 月前
查看次数：	4526 次
最近记录：	12 年，10 月前