Trong CSS3, hoạt ảnh được giới thiệu dưới các tiền tố của nhà cung cấp khác nhau, với các thuộc tính chuyển tiếp. Bây giờ, ít nhất trong CSS tinh khiết có hai cách để tạo ra một vị trí thay đổi phần tử.Biến đổi CSS: thuộc tính translate() cuối cùng là gì?
- Thiết vị trí của phần tử như tuyệt đối và fiddle với
left:
right:
top:
vàbottom:
- Sử dụng
-vendor-transform:translate(X,Y,Z)
Bây giờ, đúng vào điểm của transform:translate()
, ngoài của một người khả năng sử dụng translateZ()
, các chỉ sự khác biệt giữa chúng là cái sau không phải là một giá trị được báo cáo; ngoài việc phân tích cú pháp bản thân thuộc tính, bản dịch không được tính theo kiểu. Tuy nhiên, nếu điều này là không cần thiết, thực sự là lựa chọn tốt hơn cho các phần tử hoạt hình và định vị khác trong cấu hình position:fixed
?
Im đặc biệt quan tâm đến việc tạo một ứng dụng web khá nặng cần chạy trên thiết bị di động cũng như trình duyệt để kết quả tương thích ngược không phải là vấn đề lớn. Trình duyệt trên điện thoại di động những ngày này có xu hướng ít nhất là 'hiện đại'.
Vì vậy, cuối cùng, câu hỏi của tôi là, chính xác là transform:translate()
cho, theo các nhà sản xuất thông số kỹ thuật của CSS3? Được xây dựng ở đâu để sử dụng trên các biến đổi LRTB, và có thể sử dụng nó theo cách đáng tin cậy vì tốc độ render, độ mượt của hoạt ảnh và độ ổn định hình ảnh khi tăng tốc phần cứng (-webkit-transform: translateZ(0);
) ? Đối với những người không biết, đôi khi trong các yếu tố webkit có thể nhấp nháy trong môi trường tăng tốc phần cứng.
Trong mọi trường hợp, tôi chỉ tìm kiếm giải pháp bố cục tốt nhất và cập nhật nhất cho các ứng dụng web có thể tận dụng CPU và GPU hiệu quả nhất để chúng có thể chạy ở FPS được tối ưu hóa rất tốt. và, trong một số trường hợp, việc cuộn có liên quan) Một ví dụ tuyệt vời về loại độ mượt mà mong muốn nhất là http://www.webkit.org/blog-files/leaves/ (vâng, tôi đã đọc nguồn của nó.)
Bất kỳ đầu vào nào?
thể trùng lặp của [Có gì khác biệt giữa CSS3 dịch phương pháp và vị trí tương đối CSS2? ] (http://stackoverflow.com/questions/10007093/whats-the-difference-between-css3-translate-method-and-css2-relative-positionin) – Blender
Tôi biết sự khác biệt, tôi muốn biết mục đích của họ trong khác. – TERMtm
Không có thuộc tính 'dịch' * * nào. Có một hàm 'dịch' ** ** cho thuộc tính' transform' là phép biến đổi ma trận, cho phép thao tác 2D và 3D (dịch, xoay, nghiêng). – zzzzBov