How can I make a Marquee with 3D effects similar that is there in Android website?

Question

I want to make a 3D marquee like that is there in Android Website (http://www.android.com)

I realized that it's used -webkit-transform: translateZ but how can I put it to work?

Answer 1

To do complex animations like that, you will need to use the css properties "transform" and "transition" along with the vendor prefixes such as -webkit- and -moz- because these properties are not fully accepted yet.

All you would have to do is setup the html as follows:

<div class="container">
    <div class="movingDiv"></div
</div>

And then for the css:

.container{
    width: 960px;
    height: 300px;
}
.movingDiv{
   position: absolute;
   transition: transform 1s, opacity 1s, left 1s, top 1s;
   opacity: 1;
}
.movingDiv.foreward{
   transform: scale(1.2);
   opacity: 0;
   left: -400px;
   top: 400px;

}
.movingDiv.backward{
   transform: scale(1.2);
   opacity: 0;
   left: 600px;
   top:-100px;
}

And then use some javascript to give each of the elements (movingDiv) a class of "backward" or "forward" based on its position and leave it just as the default class (movingDiv) if it is the primary element.

I recommend spending some time reading up on it. One good source is this site, but there are plenty others.