Javascript：将Transform Scale考虑在内的准确CSS TranslateX（位置）

Question

I'm scaling a div.parent by n% using transform : scale( 0.25 ) . The width of div.parent is quite large and exceeds the viewport bounds. This container div has n children, each with a relative offset position, which I'm getting via jQuery like ( approximation )

parent  = $ '.parent'
child   = $ '.child'
posLeft = child.position().left  

I'm then moving the div.parent container using the value posLeft .

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

I would like to expand the function that handles the above animation by allowing it to continue to move div.parent accurately ( as related to the child items posLeft ) when it's scaled down. Here's an image to help illuminate the problem.

Answer 1

The solution turned out to be really simple — after eliminating a few bugs in my code. For anyone else who is interested in doing something similar, I'll post an approximation of the code below ( which uses TweenMax to handle the transitions )

 _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 )

and how to use calculateDistance()

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

This enables me to use 1 method for both the scaled and full versions of any transitions.