CSS perspective-origin屬性用法及代碼示例

CSS中的perspective-origin屬性用於定義用戶查看3D對象的位置，即3D對象的消失點。

用法:

perspective-origin:x-axis y-axis|initial|inherit;

屬性值：

x-axis:它代表透視原點的水平位置。下麵列出了x軸的可能值：
- percentage (%):它以百分比形式設置x軸。
- length:它定義了x軸的長度。
- left:設置在x軸上的左側位置。
- cente:它在x軸上設置位置中心。
- right:我將位置正確設置為x軸。
y-axis:它代表透視圖原點的垂直位置。 y軸的可能值如下所示：
- percentage (%):它以百分比設置y軸的位置。
- length:它根據長度設置位置。
- top:它在y軸上設置頂部位置。
- center:它在y軸上設置中心位置。
- bottom:它在y軸上設置底部位置。
initial:它將perspective-origin屬性設置為其默認值。
inherit:perspective-origin屬性是從其父級繼承的。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS perspective-origin Property 
    </title> 
      
    <style> 
        .container1 { 
            padding:20px; 
            perspective:100px;  
            perspective-origin:75%; 
              
            /* For Safari Browsers */ 
            -webkit-perspective:100px; 
            -webkit-perspective-origin:75%; 
        } 
        .container2 { 
            padding:20px; 
            perspective:100px;  
            perspective-origin:bottom right; 
              
            /* For Safari Browsers */ 
            -webkit-perspective:100px; 
            -webkit-perspective-origin:bottom right; 
        } 
        .container3 { 
            padding:20px; 
            perspective:100px;  
            perspective-origin:center; 
              
            /* For Safari Browsers */ 
            -webkit-perspective:100px; 
            -webkit-perspective-origin:center; 
        } 
        .rotate { 
            width:100px; 
            padding:50px; 
            text-align:center; 
            background:green; 
            transform:rotateX(10deg); 
        } 
    </style> 
</head> 
              
<body> 
    <div class = "container1"> 
          
        <p>perspective-origin:75%;</p> 
          
        <div class = "rotate">image</div> 
          
    </div> 
      
    <div class = "container2"> 
          
        <p>perspective-origin:bottom right;</p> 
          
        <div class = "rotate">image</div> 
          
    </div> 
      
    <div class = "container3"> 
          
        <p>perspective-origin:center;</p> 
          
        <div class = "rotate">image</div> 
          
    </div> 
</body> 
  
</html>

輸出：

支持的瀏覽器：下麵列出了perspective-origin屬性支持的瀏覽器：

Google Chrome36.0、12.0 -webkit-
Apple Safari 9.0、4.0.3 -webkit-)
Mozilla Firefox 16.0、10.0 -moz-
Opera 23.0、15.0 -webkit-
Internet Explorer 10.0

相關用法

注：本文由純淨天空篩選整理自SoumyaNaraparaju大神的英文原創作品 CSS perspective-origin Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。