ベストアンサー

ＤＨＴＭＬ　で　Ｙ回転とＸ回転を同時に行う、いわゆる３Ｄ回転のような方

2010/10/15 13:10

ＤＨＴＭＬ　で　Ｙ回転とＸ回転を同時に行う、いわゆる３Ｄ回転のような方法を御存知の方、おりませんか？

noname#258072

HTML
回答数5
ありがとう数3

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/10/15 18:26 回答No.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>  <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の高さの半分）です。 ※画像をクリックすると、本画像（リンク先）に遷移します。 ※描画中にブラウザーのサイズを変更しても追随します。出来たばかりなので、不具合があってもご容赦を

質問者

お礼 2010/10/18 07:36

ありがとうございます。試してみます。

ログインすると、全ての回答が全文表示されます。

その他の回答 (4)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2010/10/15 17:28 回答No.4

すみません、訂正です。 X軸、Y軸、Z軸をそれぞれX方向、Y方向、Z方向に置き換えて下さい。

質問者

お礼 2010/10/18 07:37

どうもありがとうございます。ＤＬして試してみます。

ログインすると、全ての回答が全文表示されます。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2010/10/15 17:25 回答No.3

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を変更することで、回転させているように見せることは可能です。（ショッピングサイトなどで、商品を回転させるような物があると思います）

ログインすると、全ての回答が全文表示されます。