- ベストアンサー
ＤＨＴＭＬ で Ｙ回転とＸ回転を同時に行う、いわゆる３Ｄ回転のような方
ＤＨＴＭＬ で Ｙ回転とＸ回転を同時に行う、いわゆる３Ｄ回転のような方法を御存知の方、おりませんか？
- HTML
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
３Ｄ計算してるわけじゃないけど、2次元計算して楕円軌道上で画像を 動かせば、それっぽく見えるので、HTML5の<canvas>要素を使って 「ellipse_canvas.js」ってのを作ってみました。 IEはIE9でないと<canvas>要素が無いので、替わりに「Explorercanvas」 http://code.google.com/p/explorercanvas/ を使ってます。↑からexcanvas.jsをダウンロードして下さい。 HTMLマークアップは下のようにします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Ellipse Slide Canvas By HTML5</title> <style type="text/css"> </style> <!--[if IE]><script type="text/javascript" src="/jslib/excanvas.js"></script><![endif]--> <script type="text/javascript" src="/jslib/ellipse_canvas.js"></script> </head> <body> <h2 style="text-align:center">Ellipse Slide Canvas By HTML5 or IE(excanvas.js)</h2> <div id="slide1"> <div></div> <div> <a href="/image/azu.jpg"><img src="/image/s_azu.jpg" alt="azu"></a> <a href="/image/mio.jpg"><img src="/image/s_mio.jpg" alt="mio"></a> <a href="/image/yui.jpg"><img src="/image/s_yui.jpg" alt="yui"></a> <a href="/image/mugi.jpg"><img src="/image/s_mugi.jpg" alt="mugi"></a> <a href="/image/ritu.jpg"><img src="/image/s_ritu.jpg" alt="ritu"></a> </div> </div> <script type="text/javascript"> var my_slide_1 = new ellipse_canvas(document.getElementById("slide1")); my_slide_1.ellipseSlide(100,100,200,1,1); </script> </body> </html> 使い方は、ページロード後に、まずスライドセットの<div>要素を var my_slide_1 = new ellipse_canvas(スライドセットの<div>要素,幅,高さ); でインスタンスします。canvassの幅と高さは省略出来ます。省略すると自動 調整されます。 そして、 my_slide_1.ellipseSlide(interval,img_w,img_h,opacity,zoubun,a,b); で、描画開始です。 intervalは描画間隔（ミリ秒） img_w,img_hは画像の描画サイズの幅、高さ opacityは描画画像の透過度（省略値：1.0） zoubunは描画角度増分度（省略すると自動計算） aは描画起動長軸半径（省略するとcanvassの幅の半分） bは描画起動短軸半径（省略するとcanvassの高さの半分） です。 ※画像をクリックすると、本画像（リンク先）に遷移します。 ※描画中にブラウザーのサイズを変更しても追随します。 出来たばかりなので、不具合があってもご容赦を
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
すみません、訂正です。 X軸、Y軸、Z軸をそれぞれX方向、Y方向、Z方向に置き換えて下さい。
お礼
どうもありがとうございます。ＤＬして試してみます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
DHTMLってMicrosoft社が定義しているDHTMLのことでいいですか？ X軸とY軸はmatrixを使えば可能です。 http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx Z軸についてですが、リサイズとflipを組み合わせることでそれっぽく見せることが出来ると思います。 http://msdn.microsoft.com/en-us/library/ms532992(v=VS.85).aspx http://msdn.microsoft.com/en-us/library/ms532994(v=VS.85).aspx （flipは、BasicImageのmirrorとrotateの組み合わせです。 リサイズはstyle.widthとstyle.heightを変更することでできます。） HTMLもDHTMLも完全な3Dではありませんので、仮想空間を作って、、、と言うようなことはできません。 VRML（Web3D）なら完全な3Dですが、ブラウザがサポートしておらず（昔はNetscapeやIEがサポートしていたのですが、IEはサポートも止めたようです）、プラグインをインストールする必要があります。 360度全方位から撮影した写真やイラストを何枚も用意して、srcを変更することで、回転させているように見せることは可能です。 （ショッピングサイトなどで、商品を回転させるような物があると思います）
- yyr446
- ベストアンサー率65% (870/1330)
３Ｄ回転なら、Ｚ回転も同時に行う必要がありませんか？
- yambejp
- ベストアンサー率51% (3827/7415)
なにを回転させるのでしょうか？
補足
すみません、言葉不足でした。図を回転させることを考えてます。
お礼
ありがとうございます。試してみます。