javascript - Android Web サイトにあるものと同様の 3D 効果を持つマーキーを作成するにはどうすればよいですか?

Question

Android Web サイト ( 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) のままにします。

時間をかけてじっくり読むことをお勧めします。良いソースの 1 つはこのサイトですが、他にもたくさんあります。