如何製作3D效果類似於Android網站的Marquee？

Question

我想打那樣的3D字幕是否有在Android的網站（http://www.android.com）

我意識到，它的使用-webkit-變換：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）。

我建議花一些時間閱讀它。一個很好的來源是this site，但還有很多其他的。