Jak obrócić element wokół linii innej niż X = 0, Y = 0 i Z = 0 używając CSS3?

Question

Utworzyłem to: , aby lepiej zrozumieć pytanie. Jak widać przy użyciu CSS3 możemy obrócić element wokół osi X, Y lub Z, używając transform: rotate[XYZ](M deg/rad).

Ale szukam funkcji obracania elementu na dowolnej linii. Na przykład obracanie elementu na linii x=y. lub jeszcze bardziej złożony y=2x+3.

Jeśli nie rozumiesz tego, trzymaj papier w ręku i odwróć go z dwóch najdalszych rogów (dla y=x lub y=-x). lub spójrz na to zdjęcie.

Zgaduję byłoby połączenie dwóch obrotów, ale nie wiem, jak obliczyć obroty.

Aktualizacja:

Nie wiedziałem, że jest rotate3d funkcja CSS transform. ta funkcja przyjmuje cztery argumenty: rx, , rz i deg. Uważam, że byłby bardzo pomocny w tym problemie.

Co innego, gdy zmieniamy translate[X,Y,Z] tak naprawdę zmieniając początek rotacji. To znaczy, że jeśli chce się obracać wokół Y=10px należy zmienić translateZ do 10px

Update2:

mojego aktualnego celem jest stworzenie narzędzia do zastosowania CSS przekształcić nieruchomość przy użyciu GUI. jak widać w moim pliku jsbin. Chcę go rozszerzyć na wszystko, co tylko możesz zrobić transform. Jednym z nich jest rotacja. Jestem pewien, że można obrócić element wokół innych linii niż x=0 ... ale nie wiem, jak wykonać obliczenia. Na przykład obrót o 45 ° wokół Y i 45 ° wokół Z jest taki sam jak obrót o 45 ° wokół x=y. Potrzebuję rozwiązania dla wszystkich linii w przestrzeni.

Answer 1

rozwiązanie dla kwestii pytam jest css funkcję rotate3d przekształcać. Korzystając z tej funkcji, możemy obracać elementy DOM wokół dowolnej linii w przestrzeni 3D.

Ta funkcja przyjmuje cztery argumenty, że trzy pierwsze to x, y i z, a ostatnim jest obrót.Jak rozumiem, w jaki sposób ta praca funkcja można przetłumaczyć linii funkcji algebry liniowej w rotate3d tak:

Jeśli masz funkcję korekty jak 1x + 2y + 3z = 0 i chcesz obrócić swój stopień elementem 30 należy zastosować tę właściwość CSS elementu; transform: rotate3d(1, 2, 3, 30deg);.

Stworzyłem niewielką aplikację this, aby pokazać, jak działa rotate3d.

Answer 2

Wierzę, że rozumiem, co masz na myśli. Więc jeśli znasz Photoshopa, podczas obracania obrazu możesz wybrać punkt kontrolny. To jest ten sam pomysł. Dodajesz więc punkt obrotu kodu: 50% 50% do klasy. Jedyny problem to fakt, że punkt obrotu nie jest jeszcze akceptowany w żadnej przeglądarce, ale wkrótce nastąpi. Pomyślałem, że powinieneś wiedzieć, że to w końcu będzie możliwe. here więcej

Answer 3

Proponuję przeczytać wstęp do artykułu Rotation About an Arbitrary Axis in 3 Dimensions. Podstawy są:

(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).