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

解決済

質問者：bb_pop
質問日時：2010/10/15 13:10
回答数：5件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： yyr446
回答日時：2010/10/15 18:26

　３Ｄ計算してるわけじゃないけど、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の高さの半分）
です。
※画像をクリックすると、本画像（リンク先）に遷移します。
※描画中にブラウザーのサイズを変更しても追随します。

出来たばかりなので、不具合があってもご容赦を

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/10/18 07:36

No.4

回答者： taloo
回答日時：2010/10/15 17:28

すみません、訂正です。

X軸、Y軸、Z軸をそれぞれX方向、Y方向、Z方向に置き換えて下さい。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/10/18 07:37

No.3

回答者： taloo
回答日時：2010/10/15 17:25

DHTMLってMicrosoft社が定義しているDHTMLのことでいいですか？

X軸とY軸はmatrixを使えば可能です。
http://msdn.microsoft.com/en-us/library/ms533014 …

Z軸についてですが、リサイズとflipを組み合わせることでそれっぽく見せることが出来ると思います。
http://msdn.microsoft.com/en-us/library/ms532992 …
http://msdn.microsoft.com/en-us/library/ms532994 …
（flipは、BasicImageのmirrorとrotateの組み合わせです。
リサイズはstyle.widthとstyle.heightを変更することでできます。）

HTMLもDHTMLも完全な3Dではありませんので、仮想空間を作って、、、と言うようなことはできません。
VRML（Web3D）なら完全な3Dですが、ブラウザがサポートしておらず（昔はNetscapeやIEがサポートしていたのですが、IEはサポートも止めたようです）、プラグインをインストールする必要があります。

360度全方位から撮影した写真やイラストを何枚も用意して、srcを変更することで、回転させているように見せることは可能です。
（ショッピングサイトなどで、商品を回転させるような物があると思います）