Question

我想在Android网站（http://www.android.com）

中创建一个类似3D的大门框

我意识到它使用的是 -webkit-transform：translateZ ，但我怎样才能将它投入使用？

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）。 / p>

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

如何制作与Android网站类似的3D效果的Marquee？

1 个答案: