title: Raphael Transform - Scale then Rotation, skew effect
body: <p>Here is a jsfiddle of a problem I am encountering:</p>
  
  <p><a href="http://jsfiddle.net/Tw4Qh/1/" rel="nofollow">http://jsfiddle.net/Tw4Qh/1/</a></p>
  
  <p>Given this html:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and this js (all demonstrated in jsfiddle):</p>
  
  <pre class="lang-js prettyprint-override"><code>var paper = Raphael('box', 300, 300);
  var center = { x:150, y:150 }, size = { x:10, y:10 };
  var look = { stroke:'#000000', 'stroke-width':1,
      fill:'#888888', opacity:1, 'stroke-opacity':0.9,
      'fill-opacity': 0.7, 'stroke-dasharray': '- '
  };
  var path = paper.path('').attr(look);
  
  function reset() {
      // reset to small square
      path.attr({ path:[
          [ 'M', center.x - size.x, center.y - size.y ],
          [ 'L', center.x + size.x, center.y - size.y ],
          [ 'L', center.x + size.x, center.y + size.y ],
          [ 'L', center.x - size.x, center.y + size.y ],
          [ 'z' ]
      ] }).transform([]);
      console.log(path._.transform);
  }
  
  function add_state_one() {
      // move down and left slightly and scale up
      path.transform(path._.transform.concat([
          [ 'T', -50, 10 ],
          [ 'S', 2.5, 7.5 ]
      ]));
      console.log(path._.transform);
  }
  
  function add_state_two() {
      // use bounding box center
      var bb = path.getBBox(),
          center = { x:(bb.x + bb.x2)/2, y:(bb.y + bb.y2)/2 };
      path.transform(path._.transform.concat([
          [ 'R', 30, center.x, center.y ],
          [ 'S', 0.8, 0.7, center.x, center.y ]
      ]));
      console.log(path._.transform);
  }
  
  function add_state_three() {
      // use original center
      path.transform(path._.transform.concat([
          [ 'R', 45, center.x, center.y ],
          [ 'S', 0.7, 0.5, center.x, center.y ]
      ]));
      console.log(path._.transform);
  }
  
  // buttons
  var blook = { 'stroke-dasharray':'', stroke:'transparent' };
  var btn = {
      rst:paper.path([ [ 'M', 0, 0 ], [ 'L', 10, 0 ],
                 [ 'L', 10, 10 ], [ 'L', 0, 10 ], [ 'z' ] ])
          .attr(look).attr(blook).click(reset),
      st1:paper.path([ [ 'M', 20, 0 ], [ 'L', 30, 0 ],
              [ 'L', 30, 10 ], [ 'L', 20, 10 ], [ 'z' ] ])
          .attr(look).attr(blook).attr({ fill:'#0000ff' })
          .click(add_state_one),
      st2:paper.path([ [ 'M', 40, 0 ], [ 'L', 50, 0 ],
              [ 'L', 50, 10 ], [ 'L', 40, 10 ], [ 'z' ] ])
          .attr(look).attr(blook).attr({ fill:'#ff0000' })
          .click(add_state_two),
      st3:paper.path([ [ 'M', 60, 0 ], [ 'L', 70, 0 ],
              [ 'L', 70, 10 ], [ 'L', 60, 10 ], [ 'z' ] ])
          .attr(look).attr(blook).attr({ fill:'#00ff00' })
          .click(add_state_three)
  };
  
  // click grey
  reset();
  </code></pre>
  
  <p>Basically I need to apply a scale, then apply a rotation, without the rotation being affected by the scale.</p>
  
  <p>Imagine you have a square. Now you apply a scale to it, such that it is a tall rectangle. Now you want to rotate this resulting rectangle in such a way that it remains a rectangle, with right angled corners, but is at a 45 degree angle. We are trying to achieve a rectangle that is balancing on one corner, leaning at a 45 degree angle. Instead, as demonstrated in the jsfiddle, when I apply a scale (resulting in a rectangle), then a rotate (to tilt it on a corner), I instead wind up with a skewed rectangle (or weird looking diamond).</p>
  
  <p>I am sure some body knows how to achieve this. Ultimately I plan on adding multiple different transforms (translations, rotations, and scales), from multiple points of origin, but I do not want this skewing effect to happen. Just trying to figure this out. Any help is appreciated.</p>
  
  <p>Thanks</p>