TranslateZ Tỷ lệ CSS 3D Transforms

Question

Khi tôi cố gắng thiết lập tỷ lệ phần trăm trong translateZ như thế này:

transform:translateZ(-100%); 

nó không hoạt động. Nó cũng không hoạt động với chế độ xem tương đối vh hoặc vw. Có cách nào để làm việc này không? Tôi hiểu rằng tôi có thể chỉ đơn giản là thiết lập nó với JavaScript, nhưng tôi có nhiều yếu tố trong một lớp nhất định, bao gồm cả những phần tử được thêm vào sau động với JavaScript. Sẽ thuận tiện hơn nếu bạn làm điều gì đó trong CSS. Tôi thấy thứ gì đó giống như một bản sao, nhưng tôi muốn một cách mà không cần phải có nhiều yếu tố để sửa chữa nó. Ngoài việc thêm vào phần tử <style>, đó là

Answer 1

Vâng, đọc đặc tả w3c để dịchZ, không rõ ai cũng nghĩ về những gì nên làm một giá trị phần trăm .. (hoặc ít nhất, nó không rõ ràng đối với tôi những gì nên được thực hiện).

Điều gì đã được quyết định trong tiêu chuẩn, tuy nhiên, dịch làX (100%) sẽ có liên quan đến chiều rộng.

Vì vậy, một cách để có được những gì bạn muốn sẽ được xoay cho đến khi trục x là ở trên trục z, làm dịch rìu, và khôi phục lại xoay:

CSS

transform: rotateY(-90deg) translateX(100%) rotateY(90deg); 

Trong này demo bạn có thể thấy rằng phần tử thử nghiệm có biến đổi được áp dụng, được chuyển đến cùng vị trí mà phần tử ref, có giá trị dịch (100px) (vì chiều rộng phần tử là 100px)