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軸，學過立體幾何的應該都比較清楚了，隨便百度就知道了。上面三個程式碼已經比較清楚的示範了三個旋轉函數的作用。

繼續學習

新建檔案

<!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>

重置程式碼

自動運行

提交

預覽 Clear