transformOrigin由javascript触发，旋转不正确

在javascript中使用transformOrigin时，旋转不正确。在transform origin的设置中，我使用X/Y坐标（100%/50%），因为50%是每个轴的中点

问题：运行动画时，动画的起点和终点都是正确的。在动画期间，“线指示器”以似乎不正确的角度旋转。如果将动画想象为时钟，“线指示器”在旋转时明显离开其中心

通缉犯行为：我需要移动的“线指示器”在红十字中心周围移动。我正在寻找一种使用javascript transformOrigin执行旋转的方法

var-deg=180；
函数myFunction（）{
x=document.getElementById（“指示符”）.style；
x、 transform=“旋转（“+deg+”deg）”；
x、 transformOrigin=“100%50%”；//在div的中心旋转。
x、 transition=“所有3s”；
}

指示器{
z指数：3；
位置：绝对位置；
背景色：黑色；
宽度：150px；
高度：10px；
保证金：212px0px 0px 100px；
}
.背景框{
位置：绝对位置；
z指数：1；
背景色：白色；
高度：300px；
宽度：300px；
保证金：50px 0px 0px 100px；
}
#钮扣{
高度：40px；
宽度：180px；
}
.勾选水平线{
z指数：2；
位置：绝对位置；
背景色：红色；
宽度：300px；
高度：3倍；
保证金：214px 0px 0px 100px；
}
.勾选垂直线{
z指数：2；
位置：绝对位置；
背景色：红色；
宽度：3倍；
高度：300px；
保证金：50px 0px 0px 250px；
}

将指示器移动180度

您需要设置

变换原点：100%50%
编辑

根据其他答案，最好不要设置
transformOrigin
的动画，而只是在
transition
属性中设置
transform
的动画


var-deg=180；
函数myFunction（）{
x=document.getElementById（“指示符”）.style；
x、 transformOrigin=“100%50%”；//在div的中心旋转。
x、 transition=“transform 3s”；
x、 transform=“旋转（“+deg+”deg）”；
}
指示器{
z指数：3；
位置：绝对位置；
背景色：黑色；
宽度：150px；
高度：10px；
保证金：212px0px 0px 100px；
}
.背景框{
位置：绝对位置；
z指数：1；
背景色：白色；
高度：300px；
宽度：300px；
保证金：50px 0px 0px 100px；
}
#钮扣{
高度：40px；
宽度：180px；
}
.勾选水平线{
z指数：2；
位置：绝对位置；
背景色：红色；
宽度：300px；
高度：3倍；
保证金：214px 0px 0px 100px；
}
.勾选垂直线{
z指数：2；
位置：绝对位置；
背景色：红色；
宽度：3倍；
高度：300px；
保证金：50px 0px 0px 250px；
}
将指示器移动180度
您需要设置
变换原点：100%50%
编辑

根据其他答案，最好不要设置
transformOrigin
的动画，而只是在
transition
属性中设置
transform
的动画


var-deg=180；
函数myFunction（）{
x=document.getElementById（“指示符”）.style；
x、 transformOrigin=“100%50%”；//在div的中心旋转。
x、 transition=“transform 3s”；
x、 transform=“旋转（“+deg+”deg）”；
}
指示器{
z指数：3；
位置：绝对位置；
背景色：黑色；
宽度：150px；
高度：10px；
保证金：212px0px 0px 100px；
}
.背景框{
位置：绝对位置；
z指数：1；
背景色：白色；
高度：300px；
宽度：300px；
保证金：50px 0px 0px 100px；
}
#钮扣{
高度：40px；
宽度：180px；
}
.勾选水平线{
z指数：2；
位置：绝对位置；
背景色：红色；
宽度：300px；
高度：3倍；
保证金：214px 0px 0px 100px；
}
.勾选垂直线{
z指数：2；
位置：绝对位置；
背景色：红色；
宽度：3倍；
高度：300px；
保证金：50px 0px 0px 250px；
}
将指示器移动180度
在您的情况下，您只需将其设置为正确的
，但问题是您同时应用转换，因此转换可能不会生效

更新

给出了行为的正确原因


var-deg=180；
x=document.getElementById（“指示符”）.style；
x、 transformOrigin=“right”/*在应用转换之前在此处设置它*/
函数myFunction（）{
x=document.getElementById（“指示符”）.style；
x、 transform=“旋转（“+deg+”deg）”；
x、 transition=“所有3s”；
}
指示器{
z指数：3；
位置：绝对位置；
背景色：黑色；
宽度：150px；
高度：10px；
保证金：212px0px 0px 100px；
}
.背景框{
位置：绝对位置；
z指数：1；
背景色：白色；
高度：300px；
宽度：300px；
保证金：50px 0px 0px 100px；
}
#钮扣{
高度：40px；
宽度：180px；
}
.勾选水平线{
z指数：2；
位置：绝对位置；
背景色：红色；
宽度：300px；
高度：3倍；
保证金：214px 0px 0px 100px；
}
.勾选垂直线{
z指数：2；
位置：绝对位置；
背景色：红色；
宽度：3倍；
高度：300px；
保证金：50px 0px 0px 250px；
}
将指示器移动180度
在您的情况下，您只需将其设置为正确的
，但问题是您同时应用转换，因此转换可能不会生效

更新

给出了行为的正确原因


var-deg=180；
x=document.getElementById（“指示符”）.style；
x、 transformOrigin=“right”/*在应用转换之前在此处设置它*/
函数myFunction（）{
x=document.getElementById（“指示符”）.style；
x、 transform=“旋转（“+deg+”deg）”；
x、 过渡