2012-06-19 35 views
9

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ì?

  1. Thiết vị trí của phần tử như tuyệt đối và fiddle với left:right:top:bottom:
  2. 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?

+0

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

+0

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

+2

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

Trả lời

2

chính xác những gì đang chuyển đổi: dịch() cho, theo các nhà sản xuất thông số kỹ thuật của CSS3?

It says:

Đối với tính tương thích ngược với nội dung SVG hiện có, đặc điểm kỹ thuật này hỗ trợ tất cả các chức năng được xác định bởi ‘cải tạo’ thuộc tính trong [SVG11] biến đổi.

Đối với các phần khác của câu hỏi, không chắc chắn có thể đưa ra câu trả lời chung hay không.

Tôi nghĩ tốt nhất nên chạy một số kiểm tra hiệu suất cho trường hợp cụ thể của bạn. Điều đó không khó thực hiện nếu ứng dụng của bạn được thiết kế tốt. Ngoài ra, thiết kế như vậy có thể cho phép tối ưu hóa từng thiết bị, trong đó bản dịch được sử dụng tương ứng.

+1

Tôi thực sự đã thực hiện một loạt các bài kiểm tra, bản dịch sofar là một người chiến thắng thực sự. – TERMtm

5

Tôi biết rằng đây là một bài cũ, nhưng tôi tìm thấy bài viết này rất hữu ích khi tự hỏi câu hỏi này giống nhau:

http://css-tricks.com/tale-of-animation-performance/

+2

video có paul irish trên bài đăng đó nói lên tất cả. – sheriffderek

+0

Các câu trả lời chỉ liên kết được tán thành trên SO. Nếu bạn có thể tóm tắt cách bài báo khai sáng bạn, nó sẽ được đánh giá cao. – Seanny123

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