Я создал эту страницу, чтобы лучше понять вопрос. Как вы можете видеть, используя CSS3, мы можем вращать элемент вокруг оси X, Y или Z, используя transform: rotate[XYZ](M deg/rad)
.
Но я ищу функцию для вращения элемента на любой заданной строке. Например, вращение элемента на линии x=y
. или даже более сложным y=2x+3
.
Если вы этого не понимаете, держите бумагу в руках и переверните ее из двух ее углов (для y=x
или y=-x
). или посмотрите на это изображение.
Я предполагаю, что это будет комбинация двух поворотов, но я не знаю, как рассчитать вращения.
Update:
Я не знал, что есть функция rotate3d
для CSS transform
. эта функция принимает четыре аргумента rx
, ry
, rz
и deg
. Я считаю, что это будет очень полезно для этой проблемы.
Другое дело, когда мы меняем translate[X,Y,Z]
, фактически изменяя начало вращения. Это означает, что если вы хотите повернуть вокруг Y=10px
, вы должны изменить translateZ
на 10px
Update2:
Моя фактическая цель - создать инструмент для применения свойства преобразования CSS с помощью графического интерфейса. как вы можете видеть в моем файле jsbin. Я хочу расширить его до любого возможного transform
, которое вы можете сделать. Один из них - вращение. Я уверен, что можно повернуть элемент вокруг других строк, чем x=0
... но я не знаю, как это сделать. Например, вращение 45deg вокруг Y
и 45deg вокруг Z
такое же, как вращение 45 градусов вокруг x=y
. Мне нужно решение для всех строк в пространстве.