анимация webkit 3d не движется - PullRequest
0 голосов
/ 07 марта 2012

У меня есть куча изображений, которыми я манипулировал в webkit, чтобы они были в 3D-стеке.То, что я пытаюсь сделать, это когда я нажимаю кнопку, я хочу, чтобы позиция translate3d y изменилась, или переместилась в новую позицию translate3d y.Я не могу заставить его сделать это, он просто сидит там.Я сделал jsfiddle из того, что у меня есть.

http://jsfiddle.net/xCkX7/2/

Я почти уверен, что это что-то в классе, которое определяет новую позицию.

мой 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;
}

и мой 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>

Класс .spacelayer_collapse - это то, что я пытаюсь нам внести, и в этом примере я пытаюсь изменитьразделенный как планета.Попытка сдвинуть его вниз на 35 пикселей.Конечная цель состоит в том, чтобы все четыре из них рухнули друг на друга, все они оказались бы в положении translate3d y -80.

Спасибо за помощь в этом.

...