Как повернуть элемент вокруг линии, отличной от X = 0, Y = 0 и Z = 0, используя CSS3?

Question

Я создал эту страницу для лучшего понимания вопроса.Как вы можете видеть, используя CSS3, мы можем вращать элемент вокруг оси X, Y или Z, используя transform: rotate[XYZ](M deg/rad).

Но я ищу функцию, которая вращает элемент в любой заданной строке.Например, вращение элемента на линии x=y.или даже более сложный y=2x+3.

Если вы не понимаете его, пожалуйста, держите в руке бумагу и отрывайте ее от двух дальних углов (для y=x или y=-x).или посмотрите на эту картинку.

Я предполагаю, что это будет комбинация двух поворотов, но я не знаю, какрассчитать повороты.

Обновление:

Я не знал, что есть функция rotate3d для CSS transform.эта функция принимает четыре аргумента rx, ry, rz и deg.Я чувствую, что это было бы очень полезно для этой проблемы.

Другое дело, когда мы меняем translate[X,Y,Z], это фактически меняет источник вращения.Это означает, что если вы хотите повернуть вокруг Y=10px, вы должны изменить translateZ на 10px

Update2:

Моя фактическая цель - создать инструмент дляприменить свойство CSS transform с помощью графического интерфейса.как вы можете видеть в моем файле JSBIN.Я хочу расширить это на все, что вы можете сделать.Одним из них является вращение.Я уверен, что можно вращать элемент вокруг других линий, чем x=0 ... но я не знаю, как я могу сделать расчет.Например, вращение на 45 градусов вокруг Y и 45 градусов вокруг Z такое же, как вращение на 45 градусов вокруг x=y.Мне нужно решение для всех строк в пространстве.

Answer 1

Предлагаю прочитать введение к статье Вращение вокруг произвольной оси в 3 измерениях .Основы:

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

Answer 2

Решением вопроса, который я задаю, является функция преобразования css, rotate3d.Используя эту функцию, мы могли вращать элементы DOM вокруг любой линии в трехмерном пространстве.

Эта функция принимает четыре аргумента, первые три из которых x, y и z, а последний - вращение.Как я понимаю, как работает эта функция, вы можете перевести свою функцию линейной алгебры линии в rotate3d следующим образом:

Если у вас есть функция строки, такая как 1x + 2y + 3z = 0 и вы хотите повернуть элемент на 30 градусов, вам следует применитьэто свойство css для элемента;transform: rotate3d(1, 2, 3, 30deg);.

Я создал это небольшое приложение, чтобы продемонстрировать, как работает rotate3d.

Answer 3

Я верю, я понимаю, что вы имеете в виду.Итак, если вы знаете Photoshop, когда вы поворачиваете изображение, вы можете выбрать опорную точку.Это та же идея.Таким образом, вы добавляете точку поворота кода: 50% 50% к классу.Проблема только в том, что точка вращения еще не принята ни в одном браузере, но скоро будет.Я думал, вы должны знать, что в конечном итоге это будет возможно. здесь для более