0

HTML5/JS/CSS で小さな画像をアニメーション化しようとしています。z 軸で回転する必要があります。x-/y-Axis でそれを行う方法は知っていますが、z-Axis は異なるようです。

その方法に関する素敵なチュートリアルやドキュメントが見つかりませんでした。

誰かが私にいくつかのヒントを与えることができれば素晴らしいでしょう！

これまでありがとう！

4

2 に答える 2

1

あなたが興味を持っていることは、3D レンダリング機能を使用して行うのが最適だと思います。WebGL がお手伝いします。

WebGL を使い始めるのに役立つチュートリアルがたくさんあります。これは非常に簡単で、これらは実行する必要がある一般的な手順です。

  • キャンバスを webGL で初期化する
  • 新しい gl テクスチャを作成する
  • 画像を読み込んでテクスチャにバインドする
  • ファンシーな新しいテクスチャでレンダリングするときに、基本的なクワッドとテクスチャを作成します
  • 3D 空間でクワッドを回転させます
  • 与える！

これを行う方法を詳細に説明するには、コードが多すぎます。チュートリアルを見て、さらに質問がある場合は戻ってきてください。

幸運を！

于 2012-07-20T08:31:21.917 に答える
0

HTML:

<html>
    <body>
        <div id="rotated"> 
            HelloWorld 
        </div>
    </body>
</html>

CSS:

#rotated {
    height:200px;
    width:100px;
    background-color:red;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg); 
    transform: rotateZ(45deg);
}

3 次元空間でオブジェクトを回転するには、HTML5 CSS3d 変換を使用します。上記の「preserve-3d」レンダリングのスタイルを必ず追加してください。そうしないと、オブジェクトは 3d オブジェクトの 2 次元表現を表示します。

そのスタイルを JavaScript で変更する場合は、次のようになります。

document.getElementById('rotated').style['webkitTransform'] = 'rotateZ(45deg)';
document.getElementById('rotated').style['mozTransform'] = 'rotateZ(45deg)';
document.getElementById('rotated').style['transform'] = 'rotateZ(45deg)';

すでにたくさんの CSS3d チュートリアルがあります。firefox や chrome などの CSS3d 対応ブラウザーの最新バージョンを使用していることを確認してください。

于 2012-12-10T03:40:00.960 に答える