hidekatsu HTML5

<!--jQueryを使用-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
 
<style>
/*perspective 奥行きの設定*/
#contents{ 
	-webkit-perspective: 200;
	width:300px;
	height:300px;
	position:relative;
	left:330px;
}
#contents img{ 
	width:300px;
	height:300px;
	border:solid 1px #000;
	opacity:0.5;
	/*画像を同じ位置に重ねる*/
	position: absolute;
	top: 0px;
	left: 0px;
}
 
/*画像それぞれの奥行き設定*/
#img00{ 
	-webkit-transform:
		translate3d(-150px, 0px, 0px)
		rotate3d(0, 1, 0, 90deg)
		translate3d(150px, 0px, 0px);
}
#img01{ 
	-webkit-transform:
		translate3d(150px, 0px, 0px)
		rotate3d(0, 1, 0, -90deg)
		translate3d(-150px, 0px, 0px);
}
#img02{ 
	-webkit-transform:
		translate3d(0px, -150px, 0px)
		rotate3d(1, 0, 0, -90deg)
		translate3d(0px, 150px, 0px);
}
#img03{ 
	-webkit-transform:
		translate3d(0px, 150px, 0px)
		rotate3d(1, 0, 0, 90deg)
		translate3d(0px, -150px, 0px);
}
#img04{ 
	-webkit-transform: 
		translate3d(0px ,0px ,-300px) 
}
</style>
 
<script>
// ページの読み込みが終了したら実行
window.onload = function(){
 
	// buttonのidを読み込んで関数に代入
	var myPush = document.getElementById("myPush");
 
	// buttonがclickされたら実行
	myPush.addEventListener('click',function(){
		for (i = 0; i < 5; i++){
			$(function(){
				// インデックスeq()でimgに順番にidを付加（attr）
				$("#contents img:eq("+i+")").attr('id','img0'+i);
			})
		}
	},false) //trueだとイベント発生の順番を越えて優先で実行
}
</script>
 
        <div id="contents">
            <ul>
                <li><img src="images/chrome.png" width="100" height="100" alt=""></li>
                <li><img src="images/firefox.png" width="100" height="100" alt=""></li>
                <li><img src="images/ie.png" width="100" height="100" alt=""></li>
                <li><img src="images/opera.png" width="100" height="100" alt="" ></li>
                <li><img src="images/safari.png" width="100" height="100" alt="" ></li>
            </ul>
        </div>
            <p>&nbsp;<br><br><br></p>
            <button id="myPush">push 3D</button>

<script>
// ページの読み込みが終了したら実行
window.onload = function(){
		for (i = 0; i < 5; i++){
			$(function(){
				// インデックスeq()でimgに順番にidを付加（attr）
				$("#contents img:eq("+i+")").attr('id','img0'+i);
			})
		}
}
 
//奥行き input range を動かすたびに呼ばれる関数
function myPers(value){
	document.getElementById('contents').style.webkitPerspective = value;
};
 
//奥行きの視点 input range を動かすたびに呼ばれる関数。#contents に書き出すCSS3はXとYまとめて
function myPersOrigin(){
	var sliderX = document.getElementById("sliderX").value;
	var sliderY = document.getElementById("sliderY").value;
	document.getElementById('contents').style.webkitPerspectiveOrigin = sliderX + "% " + sliderY + "%";
};
</script>
 
        <div id="contents">
            <ul>
                <li><img src="images/chrome.png" width="100" height="100" alt=""></li>
                <li><img src="images/firefox.png" width="100" height="100" alt=""></li>
                <li><img src="images/ie.png" width="100" height="100" alt=""></li>
                <li><img src="images/opera.png" width="100" height="100" alt="" ></li>
                <li><img src="images/safari.png" width="100" height="100" alt="" ></li>
            </ul>
        </div>
            <p>&nbsp;<br><br><br></p>
 
            <!-- onChange() rangeを動かすたびに関数実行。this.value で動かしてるrangeのvalue値-->
            <div style="text-align:left; margin-left:350px">
                <input type="range" id="slider" value="100" min="0" max="200" step="1" onChange="myPers(this.value)"> 奥行き perspective<br>
                <input type="range" id="sliderX" value="50" min="-100" max="200" step="1" onChange="myPersOrigin()"> 横　軸 perspective-origin X<br>
                <input type="range" id="sliderY" value="50" min="-100" max="200" step="1" onChange="myPersOrigin()"> 縦　軸 perspective-origin Y<br>
            </div>