CSS 3D biến đổi để tạo hình thang có độ dài cạnh

Question

Tôi có một phần tử có kích thước nhất định (giả sử là 100x300 px) trong một vùng chứa có cùng chiều cao và chiều rộng biến mà tôi muốn chuyển đổi bằng cách sử dụng rotateX quanh -webkit-transform-origin: top center; trong khi chọn -webkit-perspective của vùng chứa sao cho dòng dưới cùng của hình ảnh vẫn ở vị trí của nó nhưng chỉ mở rộng để lấp đầy toàn bộ vùng chứa.

Ồ, nghe có vẻ khó hiểu. Dưới đây là một bức tranh:

Vì vậy, về cơ bản, tôi muốn tạo một hình thang có chiều rộng trên cố định và có chiều rộng dưới biến. Tuy nhiên, tôi không thể tìm ra toán học đằng sau các mối quan hệ ... Javascript được chào đón. Ví dụ sau hoạt động NẾU cơ thể rộng 600px: http://jsfiddle.net/24qrQ/

Bây giờ, nhiệm vụ là thay đổi phối cảnh và quay liên tục với chiều rộng cơ thể. Bất kỳ ý tưởng?

Answer 1

Được rồi, sau một ly rượu mà toán học đã quay lại với tôi:

Trước tiên, hãy xem tỷ lệ phối cảnh/xoay vòng. Nhìn từ bên hông, nó trông như thế này:

Yếu tố đỏ có thể xoay xung quanh mép trên của nó, nếu chúng ta dự án cạnh thấp hơn của nó đến mép dưới của container, ngã tư giữa đường chiếu và dòng vuông góc với vùng chứa ở cạnh trên của nó là điểm quan sát được yêu cầu. Chúng tôi nhận được điều này bằng lượng giác đơn giản (thông báo phi ở đây là theo radian, không bằng độ).

Nếu chúng tôi áp dụng điều này, cạnh dưới của phần tử sẽ luôn xuất hiện ở cạnh dưới của vùng chứa. Bây giờ tham số miễn phí là xoay vòng. Điều này có vẻ để có mối quan hệ

rad = pi/2 - element.width/container.width 

cho độ rộng đủ lớn, tuy nhiên tôi không thể khá quấn quanh đầu tôi quan hệ thực sự. Đây là một fiddle: http://jsfiddle.net/24qrQ/6/

Answer 2

Về cơ bản, bạn đang cố gắng tìm ra cách đặt đối tượng trong không gian 3D, vì vậy nó xếp hàng với chế độ xem 2D. Đó luôn luôn là một điều khó khăn.

Tôi không biết toán học là gì, và hầu hết có thể là không. Đây không phải là một vấn đề phổ biến. Nhưng đây là cách tôi sẽ tìm hiểu về nó.

Biến duy nhất ở đây là width. Và 2 giá trị cần thay đổi dựa trên chiều rộng là -webkit-perspective trên vùng chứa và -webkit-transform trên phần tử bên trong. Vì vậy, tôi sẽ tự chỉnh sửa các giá trị cho một vài độ rộng khác nhau và ghi lại các giá trị 3D mà bạn phải nhập để làm cho mọi thứ trông đúng. (Tôi muốn sử dụng trình kiểm tra web để chỉnh sửa các giá trị theo thời gian thực để bạn nhận được phản hồi ngay lập tức)

Một trong số đó có một vài điểm dữ liệu, vẽ chúng ra trên biểu đồ và sau đó cố gắng tìm ra cách chúng thay đổi. Tôi có linh cảm, đó là đường cong parabolic, nhưng nó có thể nhưng hyperbol hoặc hình sin quá, toán 3D của tôi không đủ tốt để biết chắc chắn.

Sau đó, bạn có thể thử tìm ra phương trình khi bạn nhập chiều rộng bạn đã lấy mẫu, bạn lấy lại giá trị 3D thủ công bạn đã đặt trước đó. Sau đó, sử dụng JS để đọc chiều rộng của vùng chứa và đặt các giá trị CSS để làm cho nó trông đúng.

---

tôi đã làm điều đó với 3 độ rộng 300, 450, 600:

http://jsfiddle.net/24qrQ/3/

Một số xu hướng rất rõ ràng. Khi chiều rộng tăng, phối cảnh tăng lên khi tỷ lệ tăng lại và xoay vòng giảm với tốc độ tăng.

Tìm ra công thức chính xác, giờ đây tùy thuộc vào bạn.

---

Như một sự thay thế đơn giản hơn, nếu tìm ra một công thức trở nên quá khó khăn, bạn có thể bằng tay cha phó một số ít các chiều rộng và giá trị 3D trông đẹp và lưu trữ chúng trong JS ở đâu đó. Sau đó, bạn chỉ có thể nội suy tuyến tính giữa chúng. Nó sẽ không chính xác, nhưng nó có thể đủ gần.

Nó cũng sẽ ít thú vị hơn!