Sự khác nhau giữa các thuộc tính phối cảnh và biến đổi trong CSS là gì?

Question

Trong ứng dụng của chúng tôi, chúng tôi sử dụng một biến đổi css tạm thời khi chuyển đổi trang.

Với bản dựng mới nhất của google chrome (37), tính năng này ngừng hoạt động. Việc chuyển đổi không còn là quan điểm nữa.

Fiddling với các công cụ phát triển tôi đã có thể khôi phục lại hành vi đúng bằng cách thay đổi định nghĩa của quan điểm về các yếu tố cha mẹ từ

perspective: 2000px; 

để

transform: perspective(2000px); 

Câu hỏi của tôi là: là một cái gì đó sai với khai báo hiện tại của chúng tôi (sử dụng thuộc tính perspectice) hoặc đây có phải là lỗi trong google chrome không?

Tôi đã cố gắng tạo lại sự cố bên dưới, nhưng trong ví dụ đã giảm, tôi thấy hiệu ứng ngược lại, hiện tại phối cảnh hoạt động và biến đổi: phối cảnh không.

Mọi suy nghĩ?

.perspective-Parent { 
 
    /*-moz-transform: perspective(2000px); 
 
    -ms-transform: perspective(2000px); 
 
    -o-transform: perspective(2000px); 
 
    -webkit-transform: perspective(2000px); 
 
    transform: perspective(2000px);*/ 
 
    
 
    -moz-perspective: 2000px; 
 
    -ms-perspective: 2000px; 
 
    -webkit-perspective: 2000px; 
 
    perspective: 2000px; 
 
    
 
    -moz-perspective-origin: 50% 50%; 
 
    -ms-perspective-origin: 50% 50%; 
 
    -webkit-perspective-origin: 50% 50%; 
 
    perspective-origin: 50% 50%; 
 
} 
 

 
.page { 
 
    \t background-color: red; 
 
    
 
    \t -moz-transform-origin: right center; 
 
    \t -ms-transform-origin: right center; 
 
    \t -o-transform-origin: right center; 
 
\t -webkit-transform-origin: right center; 
 
    \t transform-origin: right center; 
 
    \t 
 
    \t -ms-transform: rotateY(75deg); 
 
    \t -moz-transform: rotateY(75deg); 
 
    \t -o-transform: rotateY(75deg); 
 
    \t -webkit-transform: rotateY(75deg); 
 
    transform: rotateY(75deg); 
 
    
 
    width: 200px; 
 
    height: 100px; 
 
}

<p> 
 
<div class="perspective-Parent"> 
 
    <div class="page"> 
 
    </div> 
 
</div>

Answer 1

hiểu biết cơ bản của tôi về quan điểm vs chuyển đổi quan điểm đơn giản là thuộc tính quan điểm đồng bằng là những gì bạn thường sử dụng trên một yếu tố phụ huynh để cung cấp cho nhiều trẻ em quan điểm tương tự, trong khi thay đổi quan điểm sẽ là được sử dụng trên một phần tử con hoặc một phần tử riêng lẻ để cung cấp cho nó quan điểm riêng của nó.

này có thể dễ dàng thấy nhất khi bạn đang áp dụng các hiệu ứng cho nhiều hơn một phần tử:

perspective: ; trên một yếu tố phụ huynh:

.perspective-Parent { 
 
    -moz-perspective: 2000px; 
 
    -ms-perspective: 2000px; 
 
    -webkit-perspective: 2000px; 
 
    perspective: 2000px; 
 
    -moz-perspective-origin: 50% 50%; 
 
    -ms-perspective-origin: 50% 50%; 
 
    -webkit-perspective-origin: 50% 50%; 
 
    perspective-origin: 50% 50%; 
 
} 
 
.page { 
 
    background-color: red; 
 
    -moz-transform-origin: right center; 
 
    -ms-transform-origin: right center; 
 
    -o-transform-origin: right center; 
 
    -webkit-transform-origin: right center; 
 
    transform-origin: right center; 
 
    -ms-transform: rotateY(75deg); 
 
    -moz-transform: rotateY(75deg); 
 
    -o-transform: rotateY(75deg); 
 
    -webkit-transform: rotateY(75deg); 
 
    transform: rotateY(75deg); 
 
    width: 200px; 
 
    height: 100px; 
 
    margin: 10px; /* added to make difference more visible */ 
 
}

<div class="perspective-Parent"> 
 
    <div class="page"></div> 
 
    <div class="page"></div> 
 
    <div class="page"></div> 
 
</div>

Chú ý rằng cả ba "trang "trong ví dụ trên đang được xem từ góc độ chung.

---

transform: perspective(); trên các yếu tố cá nhân:

.page { 
 
    background-color: red; 
 
    -moz-transform-origin: right center; 
 
    -ms-transform-origin: right center; 
 
    -o-transform-origin: right center; 
 
    -webkit-transform-origin: right center; 
 
    transform-origin: right center; 
 
    -ms-transform: perspective(2000px) rotateY(75deg); 
 
    -moz-transform: perspective(2000px) rotateY(75deg); 
 
    -o-transform: perspective(2000px) rotateY(75deg); 
 
    -webkit-transform: perspective(2000px) rotateY(75deg); 
 
    transform: perspective(2000px) rotateY(75deg); 
 
    width: 200px; 
 
    height: 100px; 
 
    margin: 10px; /* added to make difference more visible */ 
 
}

<div class="perspective-Parent"> 
 
    <div class="page"></div> 
 
    <div class="page"></div> 
 
    <div class="page"></div> 
 
</div>

Thông báo trên ví dụ này rằng ba "trang" mỗi người đều có quan điểm riêng của họ.

---

Bây giờ đó là tất cả ra khỏi con đường ...

cách tiếp cận Không là không chính xác họ chỉ cung cấp hiệu ứng hình ảnh khác nhau, chỉ cần chọn một trong những bạn thích.

Answer 2

Để kích hoạt không gian 3D, phần tử cần phối cảnh. Điều này có thể được áp dụng theo hai cách: sử dụng thuộc tính biến đổi, với phối cảnh như một ký pháp chức năng.

transform: perspective(600px); 

hoặc sử dụng tài sản quan điểm:

perspective: 600px; 

Perspective Projection vs. Perspective Transformation

Perspective Projection tính toán phối cảnh (ví dụ, rút ​​gọn) của một đối tượng 3D lên một chiếu 2D máy bay. Hiệu ứng xem trong phối cảnh đạt được, và, tất nhiên, các giá trị z (thông tin chi tiết) được loại bỏ trong quá trình này.

Perspective Transformation cho phép chúng tôi để xem cách các đa giác perspectively foreshortened và dự kiến ​​sẽ chồng chéo lên nhau, không vứt bỏ z-giá trị (mà chúng ta cần phải sử dụng sau này để so sánh chiều sâu).

Answer 3

Thứ tự quan trọng trong trường hợp khai báo thuộc tính và chức năng, chức năng "quan điểm" phải đến ngay sau thuộc tính "chuyển đổi"!

SAI MÃ

transform:rotateX(45deg) perspective(100px); 

MÃ ĐÚNG

transform:perspective(100px) rotate(45deg); 

Answer 4

Được chấp nhận câu trả lời ở đây là không đúng.

Bạn thực sự có thể thực hiện biến đổi phối cảnh trên phần tử gốc. Để làm việc này, bạn cần phải thiết lập kiểu biến đổi: preserve-3d; trên phụ huynh.

.perspective-Parent{ 
 
    transform: perspective(2000px); 
 
    transform-style: preserve-3d; 
 
} 
 

 
.page { 
 
    background-color: red; 
 
    transform-origin: right center; 
 
    transform: rotateY(75deg); 
 
    width: 200px; 
 
    height: 100px; 
 
    margin: 10px; 
 
}

<div class="perspective-Parent"> 
 
<div class="page"> 
 
</div> 
 
<div class="page"> 
 
</div><div class="page"> 
 
</div> 
 
</div>

Khi tôi kiểm tra các quan điểm khác nhau trong chrome, tài sản quan điểm đưa ra một số biến dạng kỳ lạ.

.box{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: 100px; 
 
} 
 

 
.no-perspective-box{ 
 
    transform-style: preserve-3d; 
 
    transform: rotateX(-15deg) rotateY(15deg); 
 
} 
 

 
.perspective-prop-box{ 
 
    perspective: 7.5cm; 
 
    transform-style: preserve-3d; /*This is required here too*/ 
 
    transform: rotateX(-15deg) rotateY(15deg); 
 
} 
 

 
.perspective-box{ 
 
    transform-style: preserve-3d; 
 
    transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg); 
 
} 
 

 
.face{ 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    font-size: 100px; 
 
    text-align: center; 
 
} 
 

 
.top{ 
 
    background-color: blue; 
 
    transform: rotateX(90deg) translate3d(0, 0, 50px); 
 
} 
 

 
.left{ 
 
    background-color: red; 
 
    transform: rotateY(-90deg) translate3d(0, 0, 50px); 
 
} 
 

 
.front{ 
 
    background-color: green; 
 
    transform: translate3d(0, 0, 50px); 
 
}

<p>Without Perspective:</p> 
 
<div class="box no-perspective-box"> 
 
  <div class="face front">A</div> 
 
  <div class="face top">B</div> 
 
  <div class="face left">C</div> 
 
</div> 
 
<br /><br /> 
 
<p>With Perspective Property:</p> 
 
<div class="box perspective-prop-box"> 
 
  <div class="face front">A</div> 
 
  <div class="face top">B</div> 
 
  <div class="face left">C</div> 
 
</div> 
 
<br /><br /> 
 
<p>With Perspective Function:</p> 
 
<div class="box perspective-box"> 
 
  <div class="face front">A</div> 
 
  <div class="face top">B</div> 
 
  <div class="face left">C</div> 
 
</div> 
 
<br /><br />