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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。