animating webkit 3d not moving - webkit

Question

I have a bunch of images that I've manipulated in webkit to be in a 3d stack. What I'm trying to make happen is when I click a button I want the translate3d y position to change, or move to a new translate3d y position. I can't seem to get it to do this, it just sits there. I've made a jsfiddle of what I have.
http://jsfiddle.net/xCkX7/2/
I'm almost positive its something in the class that defines the new position.
my css:
.spacelayer_main
{
-webkit-transform:skew(-40deg,0deg);
position: absolute;
border: 1px solid black;
}
.spacecontainer_main
{
position: relative;
height: 450px;
width: 450px;
border: 1px solid black;
perspective:297;
perspective-origin: 10% 10%;
-webkit-perspective:900; /* Safari and Chrome */
-webkit-perspective-origin: 92% 80%; /* Safari and Chrome */
}
#planet
{
-webkit-transform:
translate3d(-14px, -180px, 3px)
scale3d(0.65, 0.9, 0.95)
rotate3d(0, 3, 2, 180deg)
rotatez(-25deg)
rotatey(3deg);
}
#nebula
{
-webkit-transform:
translate3d(-14px, -120px, 3px)
scale3d(0.65, 0.9, 0.95)
rotate3d(0, 3, 2, 180deg)
rotatez(-25deg)
rotatey(3deg);
}
#light
{
-webkit-transform:
translate3d(-14px, -50px, 3px)
scale3d(0.65, 0.9, 0.95)
rotate3d(0, 3, 2, 180deg)
rotatez(-25deg)
rotatey(3deg);
}
#stars
{
-webkit-transform:
translate3d(-14px, 20px, 3px)
scale3d(0.65, 0.9, 0.95)
rotate3d(0, 3, 2, 180deg)
rotatez(-25deg)
rotatey(3deg);
}
.spacelayer_collapse
{
-webkit-transform:
translate3d(-14px, -80px, 3px)
scale3d(0.65, 0.9, 0.95)
rotate3d(0, 3, 2, 180deg)
rotatez(-25deg)
rotatey(3deg);
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
}
.box
{
opacity:1;
color: white;
width: 100px;
height: 100px;
}
#box4
{
background-color: blue;
}
​
and my HTML:
<div align="center" style="width:100%;">
<div style="text-align:left;width:1000px;height:500px;">
<DIV id="level4" style="position:absolute;top:0px;left:0px;z-index:4;">
<div class="spacecontainer_main">
<div id="planet" class="spacelayer_main" style="background-color:rgba(0, 0, 0,
.5);width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/planet.png"/>
</div>
</div></DIV>
<DIV id="level3" style="position:absolute;top:0px;left:0px;z-index:3;">
<div class="spacecontainer_main">
<div id="nebula" class="spacelayer_main" style="background-color:rgba(0, 0, 0,
.5);width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/nebula.png"/>
</div>
</div></DIV>
<DIV id="level2" style="position:absolute;top:0px;left:0px;z-index:2;">
<div class="spacecontainer_main">
<div id="light" class="spacelayer_main" style="background-color:rgba(0, 0, 0,
.5);width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/light.png"/>
</div>
</div></DIV>
<DIV id="level1" style="position:absolute;top:0px;left:0px;z-index:1;">
<div class="spacecontainer_main">
<div id="stars" class="spacelayer_main" style="background-color:rgba(0, 0, 0,
.5);width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/stars.png"/>
</div>
</div></DIV>
</div></div>
<div id="box4" onclick="planet.className += ' spacelayer_collapse';" class="box">Tap to move</div>
The .spacelayer_collapse class is what I'm attempting to us to make the change and in this example I'm trying to change the the div ided as planet. Trying to move it down 35 px. The end goal is to have all four of these collapse on to each other, they'd all end up at a translate3d y position of -80.
Thanks for helping me out with this.