Biến đổi cực trong CSS3?

Question

Biến một dòng vào một chiếc nhẫn là một nhiệm vụ đơn giản trong các chương trình đồ họa như GIMP:

Filter ⇒ Distorts ⇒ Polar Coordinates http://adamhaskell.net/img/transform.png

Tôi đang cố gắng để tìm ra nếu nó có thể tạo ra hiệu ứng tương tự trong CSS.

Vì vậy, tôi làm việc ra như sau:

• Các thuật toán trên đồ x để r và y để θ
• Để làm điều này, x được thu nhỏ đến phạm vi của [0,w/2], với w là chiều rộng của hình ảnh
• Ngoài ra, y được thu nhỏ trong phạm vi [0,2π]
• Để t ransform tọa độ cực trở lại vào Descartes: xc = rp*cos(θp) và yc = rp*sin(θp)
• Kết quả sau đó được dịch để nguồn gốc nằm ở giữa hình ảnh.
• Vì vậy, chúng ta có:

 

x' = (x/2)*cos(y/h*2π) + w/2; 
y' = (x/2)*sin(y/h*2π) + h/2; 

Đây là tất cả tiền phạt và dandy, nhưng làm thế nào tôi có thể sản xuất như một biến đổi trong CSS? Có lẽ không có từ khóa nào hữu ích, vì vậy nó phải là một biến đổi Ma trận. Vâng, tôi không có ý tưởng làm thế nào để xây dựng một ma trận từ hai phương trình trên, ít hơn nhiều như thế nào để đại diện cho nó trong một biến đổi CSS.

Có ai có thể giúp tôi trong bước cuối cùng này không?

Answer 1

Tôi chưa bao giờ làm việc với ma trận chuyển đổi CSS, nhưng tôi nghĩ điều bạn muốn là không thể. Sử dụng ma trận biến đổi bạn thực hiện chuyển đổi tuyến tính . Biến đổi tuyến tính LUÔN LUÔN ánh xạ đường thẳng thành đường thẳng hoặc tới 0. Take a look at Wikipedia for more information.

Vì vậy, không thể ánh xạ đường thẳng đến vòng tròn bằng ma trận.

Answer 2

Ít nhất bạn có thể làm 2 đối xứng bậc ba Bezier đường cong Sử dụng

Y (t) = (t^3, t^2, t, 1) * M * (P0, P1, P2, P3)

t - time

P0 - P3 tọa độ điểm điều khiển. Vector này phải là vertical.I không biết cách tạo vector dọc trong trình chỉnh sửa này.

Y (t) - đường cong phối hợp

M - 4 * 4 ma trận hàng 1 (-1,3, -3,1) dòng 2 (3, -6, -3,0) hàng 3 (-3,3,0,0) hàng 4 (1,0,0,0)

Bây giờ bạn chỉ cần một hàm xác định điểm điều khiển từ tọa độ đường của bạn.