関連項目⇒
フィルターmatrixを使用しています。正面、左、右、下、それと元になるページで全５ページを同時に表示します。なお、モニター解像度1024×768
に合わせて作成しています。JavaScriptで開かれるウィンドウのサイズを固定しています。
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>3D WebPAGE</TITLE>
<STYLE type="text/css">
<!--
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
BODY{margin: 0;overflow:hidden;}
DIV,IFRAME{z-index:-1;}
-->
</STYLE>
</HEAD>
<BODY>
<!--正面のメインとなるページ-->
<IFRAME name="main" src="正面のページのURL" scrolling="AUTO" margin="0" frameborder="0" border="0" style="width:600;height:400;position:absolute;top:10;left:210;z-index:-1;"></IFRAME>
<!--正面ここまで-->
<!--底面となるページ-->
<IFRAME name="bottom" src="底面となるページのURL" scrolling="AUTO"
margin="0" frameborder="0" border="0"
style="position:absolute;left:0;top:395;width:750;height:280;z-index:-2;
filter:progid:DXImageTransform.Microsoft.Matrix
(M11=1.4,M12=0,M21=0,M22=.7,Dx=0,Dy=0,FilterType='bilinear',sizingMethod='auto expand');"></IFRAME>
<!--底面ここまで-->
<!--向かって右側のページ-->
<IFRAME name="right" src="向かって右側のページのURL" scrolling="AUTO"
margin="0" frameborder="0" border="0"
style="position:absolute;left:810;top:10;width:350;height:350;
filter:progid:DXImageTransform.Microsoft.Matrix
(M11=.595,M12=0,M21=.5,M22=1.145,Dx=0,Dy=0,
FilterType='bilinear',sizingMethod='auto expand');"></IFRAME>
<!--右側ここまで-->
<!--向かって左側のページ-->
<DIV style="position:absolute;left:2;top:10;width:350;height:350;
filter:progid:DXImageTransform.Microsoft.Matrix
(M11=-.595,M12=0,M21=.5,M22=1.145,Dx=0,Dy=0,
FilterType='bilinear',sizingMethod='auto expand');">
<IFRAME name="left" src="向かって左側のページ" scrolling="AUTO" margin="0" frameborder="0" border="0" style="width:350;height:350;filter:flipH;"></IFRAME></DIV>
<!--左側ここまで-->
</BODY>
</HTML>
<HEAD>
<TITLE>3D WebPAGE</TITLE>
<STYLE type="text/css">
<!--
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
BODY{margin: 0;overflow:hidden;}
DIV,IFRAME{z-index:-1;}
-->
</STYLE>
</HEAD>
<BODY>
<!--正面のメインとなるページ-->
<IFRAME name="main" src="正面のページのURL" scrolling="AUTO" margin="0" frameborder="0" border="0" style="width:600;height:400;position:absolute;top:10;left:210;z-index:-1;"></IFRAME>
<!--正面ここまで-->
<!--底面となるページ-->
<IFRAME name="bottom" src="底面となるページのURL" scrolling="AUTO"
margin="0" frameborder="0" border="0"
style="position:absolute;left:0;top:395;width:750;height:280;z-index:-2;
filter:progid:DXImageTransform.Microsoft.Matrix
(M11=1.4,M12=0,M21=0,M22=.7,Dx=0,Dy=0,FilterType='bilinear',sizingMethod='auto expand');"></IFRAME>
<!--底面ここまで-->
<!--向かって右側のページ-->
<IFRAME name="right" src="向かって右側のページのURL" scrolling="AUTO"
margin="0" frameborder="0" border="0"
style="position:absolute;left:810;top:10;width:350;height:350;
filter:progid:DXImageTransform.Microsoft.Matrix
(M11=.595,M12=0,M21=.5,M22=1.145,Dx=0,Dy=0,
FilterType='bilinear',sizingMethod='auto expand');"></IFRAME>
<!--右側ここまで-->
<!--向かって左側のページ-->
<DIV style="position:absolute;left:2;top:10;width:350;height:350;
filter:progid:DXImageTransform.Microsoft.Matrix
(M11=-.595,M12=0,M21=.5,M22=1.145,Dx=0,Dy=0,
FilterType='bilinear',sizingMethod='auto expand');">
<IFRAME name="left" src="向かって左側のページ" scrolling="AUTO" margin="0" frameborder="0" border="0" style="width:350;height:350;filter:flipH;"></IFRAME></DIV>
<!--左側ここまで-->
</BODY>
</HTML>