CSS3 perspective-origin

admin發表於2018-05-21
CSSS3

建議首先閱讀CSS3 perspective一章節， 下面進入正題。

perspective-origin屬性設定perspective屬性源點的角度。

關於transform變換更多內容可以參閱CSS3 2D/3D轉換一章節。

語法結構

[CSS] 純文字檢視 複製程式碼
perspective-origin: x-axis y-axis;

引數解析:

（1）.x-axis:定義檢視在x軸上的位置。預設值是50%；可以是left、center、right、length和%形式。

（2）.y-axis:定義檢視在y軸上的位置。預設值是50%；可以是left、center、right、length和%形式。

可能的引數值形式:left、center、right、length和%。

看了上面的介紹可能還是不夠清晰，沒有能在大腦中形成一個清晰的概念，那麼看下面這張圖片:

a:3:{s:3:\"pic\";s:43:\"portal/201702/12/114305iuz99rtyufrp2nx7.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對以上圖片做一下簡單介紹:

（1）.灰色部分就是我們要看的物體。

（2）.橘紅色部分就是perspective屬性設定的檢視位置。

（3）.紅色中心點就是預設的perspective-origin屬性值所在位置。

觀察物體的時候，並非都是從中心點看過去，可能要換個角度，那麼就可以沿著x軸或者y軸更換一個角度。

如果上面說的還不夠清楚，再來看下面的圖:

a:3:{s:3:\"pic\";s:43:\"portal/201702/12/114417om5gm259t6t56gvs.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的圖片表示預設的觀看角度，下面調整一下角度:

a:3:{s:3:\"pic\";s:43:\"portal/201702/12/114442wx9jqlrq4aa16q9s.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的圖片向上提高了一下座標，這樣應該比較清晰了。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
#box{ 
  position:relative; 
  height:200px; 
  width:200px; 
  margin-top:150px; 
  margin-left:150px; 
  border:1px solid black; 
  perspective:1000px; 
     
  -webkit-perspective-origin:50px 50px; 
  perspective-origin:50px 50px; 
} 
#inner{ 
  padding:50px; 
  position:absolute; 
  border:1px solid black; 
  background-color:yellow; 
  transform:rotate(45deg); 
  transform-origin:40px 40px; 
  font-size:12px; 
       
  transform:rotateX(45deg); 
} 
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)"; 
  opersp.innerHTML=value + "deg"; 
} 
     
function changeOrg(){ 
  var ox=document.getElementById('ox'); 
  var oy=document.getElementById('oy'); 
  var obox=document.getElementById('box'); 
  var origin=document.getElementById('origin'); 
       
  var x=ox.value; 
  var y=oy.value; 
       
  obox.style.perspectiveOrigin=x + 'px' + y + 'px'; 
  obox.style.webkitPerspectiveOrigin=x + 'px ' + y + 'px';  
     
  origin.innerHTML=x + "px " + y + "px";             
}
window.onload = function () {
  xuanzhuan.onmousemove = function () {
    changeRot(this.value);
  }
  ox.onmousemove = function () {
    changeOrg();
  }
  oy.onmousemove = function () {
    changeOrg();
  }
}
</script> 
</head>   
<body> 
<div id="box"> 
  <div id="inner">螞蟻部落</div> 
</div> 
<table> 
  <tr> 
    <td class="left">旋轉:</td> 
    <td><input type="range" min="-360" id="xuanzhuan" max="360" value="45"/></td> 
  </tr> 
  <tr> 
    <td class="left">rotateX:</td> 
    <td>(<span id="persp">45deg</span>)</td> 
  </tr> 
  <tr> 
    <td class="left">X軸:</td> 
    <td><input type="range" min="-100" max="200" value="50" id="ox"/></td> 
  </tr> 
  <tr> 
    <td class="left">Y軸:</td> 
    <td><input type="range" min="-100" max="200" value="50" id="oy"/></td> 
  </tr> 
  <tr> 
    <td class="left">origin:</td> 
    <td><span id="origin">50px 50px</span></td> 
  </tr> 
</table> 
</body> 
</html>

相關文章