I have two boxes, each measuring 200px by 200px, that I would like to animate using CSS animations. The first box (upper box) should rotate from rotateX(0deg) to rotateX(90deg) with a transform-origin of center top. The second box should follow the bottom line of the first box, so it should be animated from translateZ(0px) translateY(0px) to translateZ(200px) translateY(-200px). This alignment is essential only at the start and end of the animation. You can see an example of this animation here.
In the example, I have used only -webkit- and -moz- prefixes.
You can view the JSFiddle here
HTML
<div class="box box-1"></div>
<div class="box box-2"></div>
CSS
body{
padding: 200px 0 0 0;
margin: 0;
background-color: orange;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-transform-style: preserve-3d;
-moz-perspective: 1000px;
}
.box{
height: 200px;
width: 200px;
margin: 0 auto;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
opacity: 0.7;
}
.box-1{
background-color: blue;
-webkit-animation-duration: 3s;
-webkit-animation-name: boxOne;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-duration: 3s;
-moz-animation-name: boxOne;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
.box-2{
background-color: purple;
-webkit-animation-duration: 3s;
-webkit-animation-name: boxTwo;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 3s;
-webkit-animation-name: boxTwo;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes boxOne{
from {
-webkit-transform: rotateX(0deg);
}
to {
-webkit-transform: rotateX(90deg);
}
}
@-webkit-keyframes boxTwo{
from {
-webkit-transform: translateZ(0px) translateY(0px);
}
to {
-webkit-transform: translateZ(200px) translateY(-200px);
}
}
@-moz-keyframes boxOne{
from {
-moz-transform: rotateX(0deg);
}
to {
-moz-transform: rotateX(90deg);
}
}
@-moz-keyframes boxTwo{
from {
-moz-transform: translateZ(0px) translateY(0px);
}
to {
-moz-transform: translateZ(200px) translateY(-200px);
}
}