javascript - 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

要制作这样的复杂动画，您需要使用 css 属性“transform”和“transition”以及供应商前缀，例如 -webkit- 和 -moz-，因为这些属性还没有被完全接受。

您所要做的就是按如下方式设置 html：

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

然后对于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;
}

然后使用一些javascript根据每个元素（movingDiv）的位置为每个元素（movingDiv）赋予一个“向后”或“向前”类，如果它是主要元素，则将其保留为默认类（movingDiv）。

我建议花一些时间阅读它。一个很好的来源是这个网站，但还有很多其他的。