Làm thế nào để xoay một phần tử xung quanh một dòng khác với X = 0, Y = 0 và Z = 0 bằng cách sử dụng CSS3?

Question

Tôi đã tạo số này page để hiểu rõ hơn về câu hỏi. Như bạn có thể thấy bằng cách sử dụng CSS3, chúng ta có thể xoay một phần tử xung quanh trục X, Y hoặc Z bằng cách sử dụng transform: rotate[XYZ](M deg/rad).

Nhưng tôi đang tìm một chức năng để xoay phần tử trên bất kỳ dòng nhất định nào. Ví dụ: xoay phần tử trên đường dây x=y. hoặc thậm chí phức tạp hơn y=2x+3.

Nếu bạn không hiểu nó, hãy giữ một tờ giấy trong tay và lật nó từ hai góc xa của nó (cho y=x hoặc y=-x). hoặc nhìn vào bức tranh này.

Tôi đoán nó sẽ là sự kết hợp của hai góc xoay, nhưng tôi không biết làm thế nào để tính toán các phép quay.

Cập nhật:

tôi không biết có một chức năng rotate3d cho CSS transform. chức năng này chấp nhận bốn đối số rx, ry, rz và deg. Tôi cảm thấy rằng sẽ rất hữu ích cho vấn đề này.

Điều khác là khi chúng tôi thay đổi translate[X,Y,Z] nó thực sự thay đổi nguồn gốc của vòng quay. Đó có nghĩa là nếu bạn muốn xoay quanh Y=10px bạn nên thay đổi translateZ để 10px

Update2:

mục tiêu thực tế của tôi là tạo ra một công cụ để áp dụng CSS transform tài sản sử dụng một giao diện đồ họa. như bạn có thể thấy trong tệp jsbin của tôi. Tôi muốn mở rộng nó đến bất cứ điều gì transform có thể bạn có thể làm. Một trong số đó là xoay vòng. Tôi chắc chắn có thể xoay phần tử quanh các dòng khác với số x=0 ... nhưng tôi không biết làm cách nào để tính toán. Ví dụ xoay 45 độ xung quanh Y và 45 độ xung quanh Z giống như xoay 45 độ xung quanh x=y. Tôi cần một giải pháp cho tất cả các dòng trong không gian.

Answer 1

Giải pháp cho câu hỏi Tôi đang hỏi chức năng chuyển đổi css, rotate3d. Sử dụng hàm này, chúng ta có thể xoay các phần tử DOM xung quanh bất kỳ dòng nào trong không gian 3D.

Chức năng này chấp nhận bốn đối số ba đầu tiên là x, y và z và lần cuối cùng là xoay vòng.Như tôi đã hiểu thế nào chức năng công việc này bạn có thể dịch dòng chức năng đại số tuyến tính của bạn vào rotate3d như thế này:

Nếu bạn có một hàm dòng như 1x + 2y + 3z = 0 và muốn xoay độ yếu tố 30 của bạn thì bạn nên áp dụng bất động sản css này để yếu tố; transform: rotate3d(1, 2, 3, 30deg);.

Tôi đã tạo this ứng dụng nhỏ để minh họa cách hoạt động của rotate3d.

Answer 2

Tôi tin rằng tôi hiểu ý bạn là gì. Vì vậy, nếu bạn biết Photoshop, khi bạn xoay một hình ảnh, bạn có thể chọn một điểm neo. Đây cũng là ý kiến ​​tương tự. Vì vậy, bạn thêm mã xoay-điểm: 50% 50% cho lớp. Chỉ có vấn đề là, điểm quay không được chấp nhận trong bất kỳ trình duyệt nào, nhưng sẽ sớm có. Tôi nghĩ bạn nên biết rằng điều này cuối cùng sẽ là một khả năng. here để biết thêm

Answer 3

Tôi khuyên bạn nên đọc phần giới thiệu bài viết Rotation About an Arbitrary Axis in 3 Dimensions. Thông tin cơ bản là:

(1) Translate space so that the rotation axis passes through the origin. 
(2) Rotate space about the z axis so that the rotation axis lies in the xz plane. 
(3) Rotate space about the y axis so that the rotation axis lies along the z axis. 
(4) Perform the desired rotation by θ about the z axis. 
(5) Apply the inverse of step (3). 
(6) Apply the inverse of step (2). 
(7) Apply the inverse of step (1).