Javascript：考虑转换比例的精确CSS TranslateX（位置）

我正在使用

transform:scale（0.25）

将一个

div.parent

缩放n%。

div.parent

的宽度非常大，超出了视口边界。这个容器

div

有n个子容器，每个子容器都有一个相对的偏移位置，我通过

jQuery

like（近似值）获取

然后，我使用值

posLeft

移动

div.parent

容器

 parent.css
    transform : "translate3d( #{posLeft}px, 0, 0 )"

我想扩展处理上述动画的

函数

，允许它在缩小时继续准确地移动

div.parent

（与子项

posLeft

）。下面是一幅有助于说明问题的图像

---

在消除了代码中的一些错误后，解决方案变得非常简单。对于其他有兴趣做类似事情的人，我将发布下面代码的近似值（使用

TweenMax

处理转换）

以及如何使用

calculateInstance（）

这使我能够对任何转换的缩放版本和完整版本使用1方法

 parent.css
    transform : "translate3d( #{posLeft}px, 0, 0 )"

 _state = 
     scale : 1

 state: ( state, value )-> 
     if value is undefined
         return _state[state] 
     else 
         _state[state] = value 

 calculateDistance( distance, scale )->
     newDistance = distance * scale
     return newDistance 


 scaleDown = ( amount )->
     if amount > 1 then amount = 1

     props =
         x                   : 0 
         scale               : amount 
         transformOrigin     : 'center left'
         onComplete          : Done 

         TweenMax.to container, 0.4, props 

  Done =->
      num = this.vars.css.scale 

      state( 'scale', num )

location =  calculateDistance( move.destination.attr( 'data-location' ), state('scale' ) )