Is there any way to change an "anchor point" of a CSS attribute? (not of an element itself)
<p>Since I'm not a "real" programmer, I apologize if I'm writing something undesirable. Give me negative points, delete my post, tell me I'm stupid, but please answer, I will really appreciate it :)</p>

<p>I'm animating these elements by changing their height attributes. As you can see, the anchor point of the element is on its bottom left corner, but the attribute "height" has its own "default" anchor point. Can it be on the bottom of an element? Can i do anything to make it happen without using the negative value for the "height" attribute?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function onmouseoverOne(){
  document.getElementById("one").style.height = "40px";
};
function onmouseoutOne(){
  document.getElementById("one").style.height = "50px";
};
function onmouseoverTwo(){
  document.getElementById("two").style.height = "40px";
};
function onmouseoutTwo(){
  document.getElementById("two").style.height = "50px";
};
function onmouseoverThree(){
  document.getElementById("three").style.height = "40px";
};
function onmouseoutThree(){
  document.getElementById("three").style.height = "50px";
};</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
*{padding: 0;margin: 0;}
body {
  background-color:white;
}
#container {position:fixed; top:50px; left:100px; width:300px; height:100px; z-index:1;}
#container p{position:absolute; top:100px; left:0px;z-index:3;}
#one {position:absolute; top:50px; left:0px; width:100px; height:50px; background-color:green; z-index:2; cursor:pointer;
-webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
        transition: all 300ms linear;
-webkit-tranform: translate(0,-50px);
   -moz-tranform: translate(0,-50px);
        tranform: translate(0,-50px);
}
#two {position:absolute; top:50px; left:100px; width:100px; height:50px; background-color:blue;  z-index:2; cursor:pointer;
-webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
        transition: all 300ms linear;
-webkit-tranform: translate(0,-50px);
   -moz-tranform: translate(0,-50px);
        tranform: translate(0,-50px);
}
#three {position:absolute; top:50px; left:200px;  width:100px; height:50px; background-color:purple; z-index:2; cursor:pointer;
-webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
        transition: all 300ms linear;
-webkit-tranform: translate(0,-50px);
   -moz-tranform: translate(0,-50px);
        tranform: translate(0,-50px);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;div id="one"   onmouseover = "onmouseoverOne()"   onmouseout = "onmouseoutOne()"&gt;&lt;/div&gt;   
  &lt;div id="two"   onmouseover = "onmouseoverTwo()"   onmouseout = "onmouseoutTwo()"&gt;&lt;/div&gt; 
  &lt;div id="three" onmouseover = "onmouseoverThree()" onmouseout = "onmouseoutThree()"&gt;&lt;/div&gt;
  &lt;p&gt;pls mouseover&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>here is a diagram
<a href="http://i.imgur.com/Pf7SzNk.jpg?1" rel="nofollow">http://i.imgur.com/Pf7SzNk.jpg?1</a></p>