2013-03-09 15 views
7

Tôi có một số f232 here mà bạn có thể chơi cùng. Di chuyển xung quanh các thanh trượt rotateX và rotateY để xem. Phần của phần tử gần nhất với bạn nhỏ hơn trong khi phần xa hơn là lớn hơn. Nếu bạn lật nó xung quanh bằng cách sử dụngTại sao phối cảnh trên các phần tử chuyển đổi xuất hiện ngược?

transform:rotateZ(180deg); 

có vẻ đúng nhưng tôi không hiểu tại sao nó không chỉ nhìn ngay từ đầu.

enter image description here

cập nhật

nó có ý nghĩa nếu bạn nhìn vào this 3d cube. nguồn gốc biến đổi của khối lập phương là giữa khối lập phương.

+0

cách thức hoặc tại sao chủ đề này bị tắt? mỗi người dùng được liệt kê bên dưới, người đã đóng chủ đề này là chủ đề không tốt. cung cấp một câu trả lời hoặc lý do đằng sau holier của bạn hơn so với những người tiên phong – albert

+0

thx để gắn bó cho tính hợp lệ của câu hỏi. – user1873073

+0

@thinkingstiff "ngừng đặt crap ở đầu nó" những gì một câu trả lời sâu sắc và trực quan. tất cả chúng ta đều có thể học được từ đó! – albert

Trả lời

3

Isometric

Theo như tôi có thể nói với các phương pháp làm việc như họ đang giả sử, nó chỉ là họ được luân chuyển trong không gian 3D đẳng, có nghĩa là không có triển vọng. Điều này sẽ làm cho các cạnh gần nhất và xa hơn của bạn sẽ có cùng kích thước, không giống như 3D thực, nơi cạnh tiếp theo sẽ trông nhỏ hơn và gần hơn sẽ trông lớn hơn.

Để có cái nhìn sâu hơn về phép chiếu đẳng động, hãy đọc số wikipedia article.

Perspective

Nếu bạn muốn nhận được quan điểm về các phép quay bạn phải thêm perspective tài sản cho CSS của bạn cho các phần tử chứa. Nếu bạn thêm -webkit-perspective: 1000px; vào <body> trong fiddle đầu tiên của mình và xem kết quả trong Chrome, bạn sẽ có được phối cảnh 3D giống như bạn có thể muốn.

Thông tin thêm về thuộc tính đó có thể được tìm thấy trong CSS3 transform spec.

+0

sau khi xem lại lần thứ hai thuộc tính này, điều này cuối cùng cũng hiệu quả. kỳ lạ, nó chỉ hoạt động khi áp dụng nó cho phụ huynh của container. – user1873073

Các vấn đề liên quan