Chuyển đổi CSS3 3d - Chồng chéo div với các chỉ mục z khác nhau có kết quả khác nhau cho các trình duyệt webkit

Question

Tôi đang cố gắng tìm ra trình duyệt nào không triển khai quyền này: Tôi có 2 div được đặt trên đầu trang của nhau. Đối với mặt trước, tôi xoay trục Y và dịch trục X. Bây giờ cho cùng một điều này tôi thiết lập một chỉ số z thấp hơn so với cái khác. Tôi thấy 2 kết quả đầu ra khác nhau cho Chrome/Safari. Cái nào là cái có ý nghĩa hơn. Đây là bài kiểm tra của tôi: http://jsfiddle.net/f5VWN/

Tôi đoán vấn đề có thể được rút ngắn thành: Cho 2 phần tử vào không gian 3d, chỉ số z-index có quan trọng không :)?

Answer 1

Theo spec:

Vị trí trên trục Z của một yếu tố biến đổi không ảnh hưởng đến trật tự trong một bối cảnh xếp chồng.

Safari hiển thị không chính xác. Tuy nhiên, bất kể, tôi sẽ không làm cho bố trí của bạn phụ thuộc vào kỹ thuật này.

Answer 2

Hậu duệ của một phần tử được san phẳng vào mặt phẳng của cha mẹ theo mặc định, do đó các div trước và sau không chia sẻ cùng một không gian 3D. Chúng chỉ được chuyển đổi và đặt trên đầu trang của div container riêng biệt, mà nguyên nhân div trở lại được rút ra trên đầu trang của div phía trước. Để chuyển đổi các yếu tố trong không gian 3D cùng, cho chồng chéo 3D vào divs trẻ em, thiết lập các -webkit-transform-style tài sản để preserve-3d trong container: http://jsfiddle.net/f5VWN/2/

Các z-index vẫn quan trọng, đặc biệt là khi hai yếu tố chồng chéo nhau.