CSS3 3D轉換
掌握3D轉換效果，可以從三個方法作為突破口，分別是rotateX, rotateY, rotateZ；在2D變換中，rotate()表示旋轉的意思，由於是2D變換，所以它只是在一個平面進行旋轉，所以無需細分。
一.rotateX()方法:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateX(0deg);
-ms-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
-o-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="rotateX(" + value + "deg)";
oinner.style.msTransform="rotateX(" + value + "deg)";
oinner.style.webkitTransform="rotateX(" + value + "deg)";
oinner.style.MozTransform="rotateX(" + value + "deg)";
oinner.style.OTransform="rotateX(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateX:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>以上程式碼示範了rotateX()的作用，他可以控制元素圍繞著x軸進行旋轉，就像是體操運動員，在單槓上旋轉一樣。
二.rotateY()方法:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateY(0deg);
-ms-transform:rotateX(0deg);
-webkit-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="rotateY(" + value + "deg)";
oinner.style.msTransform="rotateY(" + value + "deg)";
oinner.style.webkitTransform="rotateY(" + value + "deg)";
oinner.style.MozTransform="rotateY(" + value + "deg)";
oinner.style.OTransform="rotateY(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateY:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>以上程式碼示範了rotateY()的作用，他可以控制元素圍繞著y軸進行旋轉，就像是鋼管舞者在垂直的鋼管上旋轉。
三.rotateZ()方法:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
font-size:12px;
transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-moztransform-origin:0px 0px;
transform:rotateZ(0deg);
-ms-transform:rotateZ(0deg);
-webkit-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="rotateZ(" + value + "deg)";
oinner.style.msTransform="rotateZ(" + value + "deg)";
oinner.style.webkitTransform="rotateZ(" + value + "deg)";
oinner.style.MozTransform="rotateZ(" + value + "deg)";
oinner.style.OTransform="rotateZ(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文网</div>
</div>
<table>
<tr>
<td class="left">旋转:</td>
<td><input type="range" min="-360" max="360" id="range" value="0"/></td>
</tr>
<tr>
<td class="left">rotateZ:</td>
<td>(<span id="persp">0deg</span>)</td>
</tr>
</table>
</body>
</html>以上程式碼示範了rotateZ()的作用，他可以控制元素圍繞著z軸進行旋轉，關於Z軸，學過立體幾何的應該都比較清楚了，隨便百度就知道了。上面三個程式碼已經比較清楚的示範了三個旋轉函數的作用。
