title: Defining scale3d origin with css3
body: <p>I've been working on creating an animating bar graph using css3. It's been working well for the sides of the bars, but the top and bottoms of the bars have been problematic.</p>
  
  <p>I've been scaling the sides just by altering their css 'height' property via jQuery, but I realize that's not the best way to do it. I've tried using scale3d(), but it always scales the object from what seems to be the center of the object. I need it to scale the object from the bottom of the cube. Here's the css I've got so far (using stylus)</p>
  
  <pre><code>#barTwo
  #barOne
  #barThree
  #barFour
      position relative
      -webkit-transition -webkit-transform 2s linear
      -webkit-transform-style preserve-3d
      height 400px
      width 100px
      float left
      margin-left 100px
  
  .face
      position absolute
      height 360px
      width 80px
      padding 20px
      background-color rgba(50, 50, 50, 0.3)
      bottom 0px
      left 0px
      -webkit-transition 10000ms all
  
  .one /* top */
      -webkit-transform rotateX(90deg) translateZ(340px)
      height 80px     
      background-color rgba(50, 50, 50, 0.9)
      display none
  
  .two /* front */
      -webkit-transform translateZ(60px)
      background-color rgba(50, 50, 50, 0.7)
  
  .three /* right */
      -webkit-transform rotateY(90deg) translateZ(60px)
      background-color rgba(50, 50, 50, 0.6)
  
  .four /* back */
      -webkit-transform rotateY(180deg) translateZ(60px)
      background-color rgba(50, 50, 50, 0.7)
  
  .five /* left */
      -webkit-transform rotateY(-90deg) translateZ(60px)
      background-color rgba(50, 50, 50, 0.8)
  
  .six /* bottom */
      -webkit-transform rotateX(-90deg) translateZ(60px) rotate(180deg)
      background-color rgba(50, 50, 50, 0.9)
      height 80px
      display none
  </code></pre>
  
  <p>Draws a great rectangle, but scaling them 'upwards' has been eluding me.</p>