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

Я создал эту страницу, чтобы лучше понять вопрос. Как вы можете видеть, используя 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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

Я предлагаю прочитать введение в статью Вращение вокруг произвольной оси в 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).

Ответ 3

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