Tidadigi Logo

CSS perspective-origin Property

Thuộc tính perspective-origin trong CSS dùng để xác định vị trí người dùng nhìn vật thể 3D. Điểm nhìn này chính là điểm hội tụ của đối tượng 3D.

Cú pháp:

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

Giá trị thuộc tính:

  • x-axis: Nó biểu thị vị trí ngang của gốc phối cảnh. Các giá trị có thể của x-axis được liệt kê dưới đây:
    • percentage (%): Nó thiết lập trục x theo tỷ lệ phần trăm.
    • length: Nó xác định độ dài của trục x.
    • left: Nó thiết lập vị trí bên trái trên trục x.
    • center: Nó thiết lập vị trí trung tâm trên trục x.
    • right: Nó thiết lập vị trí bên phải theo trục x.
  • y-axis: Nó biểu thị vị trí dọc của gốc phối cảnh. Các giá trị có thể của y-axis được liệt kê dưới đây:
    • percentage (%): Nó thiết lập vị trí của trục y theo tỷ lệ phần trăm.
    • length: Nó thiết lập vị trí theo chiều dài.
    • top: Nó thiết lập vị trí trên cùng trên trục y.
    • center: Nó thiết lập vị trí trung tâm trên trục y.
    • bottom: Nó thiết lập vị trí dưới cùng trên trục y.
  • initial: Nó đặt thuộc tính perspective-origin về giá trị mặc định của nó.
  • inherit: Thuộc tính perspective-origin được kế thừa từ phần tử cha của nó.

Ví dụ: 

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

Đầu ra:

 css-perspective-origin-property 

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi perspective-origin property được liệt kê dưới đây:

  • Google Chrome 36.0
  • Edge 12.0
  • Apple Safari 9.0
  • Mozilla Firefox 16.0
  • Opera 23.0
  • Internet Explorer 10.0

Last Updated : 21/07/2025