Javascript 如果元素旋转，FireFox中的CSS宽度变换会发生突变

尝试使用旋转的文本设置元素宽度的动画

在Chrome、IE-11和Safari中，动画看起来很流畅，但在FireFox中却很不稳定

如何使垂直分割宽度动画更加平滑和干净

片段

function animate（）{
var e=document.getElementById（'rotbox1'）；
如果（e.style.width='120px'）e.style.width='200px'；否则e.style.width='120px'；
e=document.getElementById（'rotbox2'）；
如果（e.style.width='120px'）e.style.width='200px'；否则e.style.width='120px'；
}
制作动画（）；
设置间隔（动画，2000年）
.wrp-v{
-webkit变换：旋转（90度）；
变换：旋转（90度）；
-webkit转换原点：右；
变换原点：右；
右侧填充：30px；
位置：绝对位置；
右：30%；
底部：20%；
高度：40px；
}
.wrp-h{
右侧填充：30px；
位置：绝对位置；
右：30%；
底部：20%；
高度：40px；
}
rotbox先生{
背景：绿色；
颜色：白色；
显示：内联块；
文本对齐：居中；
高度：40px；
宽度：200px；
线高：40px；
边界半径：20px；
字体大小：16px；
-webkit过渡：宽度2.0s；
过渡：宽度2.0s；
}

你好，世界
你好，世界
改变
旋转（90度）旋转<代码>旋转（90.3deg）使显示更平滑

阅读以下答案：
也许您可以使用
转换来代替：


function animate（）{
var e=document.getElementById（'rotbox1'）；
如果（e.style.height='120px'）e.style.height='200px'；
否则e.style.height='120px'；
e=document.getElementById（'rotbox2'）；
如果（e.style.width='120px'）e.style.width='200px'；
否则e.style.width='120px'；
}
制作动画（）；
设置间隔（动画，2000年）
.wrp-v{
文本对齐：居中；
-webkit写作模式：垂直lr；
/*老温野生动物园*/
书写方式：垂直lr；
写入方式：tb-lr；
方向：ltr；
右侧填充：30px；
位置：绝对位置；
右：30%；
底部：30%；
}
.wrp-h{
右侧填充：30px；
位置：绝对位置；
右：30%；
底部：20%；
}
rotbox先生{
背景：绿色；
颜色：白色；
显示：内联块；
文本对齐：居中；
高度：40px；
线高：40px；
边界半径：20px；
字体大小：16px；
-webkit过渡：宽度2.0s；
过渡：宽度2.0s；
}
#rotbox1{
高度：200px；
-webkit过渡：高度2.0s；
过渡：高度2.0s；
}

你好，世界
你好，世界
使容器固定宽度似乎可以解决问题


function animate（）{
var e=document.getElementById（'rotbox1'）；
如果（e.style.width='120px'）e.style.width='200px'；否则e.style.width='120px'；
e=document.getElementById（'rotbox2'）；
如果（e.style.width='120px'）e.style.width='200px'；否则e.style.width='120px'；
}
制作动画（）；
设置间隔（动画，2000年）
.wrp-v{
-webkit变换：旋转（90度）；
变换：旋转（90度）；
-webkit转换原点：右；
变换原点：右；
右侧填充：30px；
位置：绝对位置；
右：30%；
底部：20%；
高度：40px；
宽度：200px；/*新*/
}
#rotbox1{/*新*/
位置：绝对位置；
右：0px；
}
.wrp-h{
右侧填充：30px；
位置：绝对位置；
右：30%；
底部：20%；
高度：40px；
}
rotbox先生{
背景：绿色；
颜色：白色；
显示：内联块；
文本对齐：居中；
高度：40px；
宽度：200px；
线高：40px；
边界半径：20px；
字体大小：16px；
-webkit过渡：宽度2.0s；
过渡：宽度2.0s；
}

你好，世界
你好，世界
将
.rotbox
设置为
位置：绝对修复了此问题。我不知道为什么。：）


function animate（）{
var e=document.getElementById（'rotbox1'）；
如果（e.style.width='120px'）e.style.width='200px'；否则e.style.width='120px'；
}
制作动画（）；
设置间隔（动画，2000年）
.wrp-v{
-webkit变换：旋转（90度）；
变换：旋转（90度）；
-webkit转换原点：右；
变换原点：右；
右侧填充：30px；
位置：绝对位置；
右：30%；
最高：20%；
高度：40px；
}
rotbox先生{
位置：绝对位置；
背景：绿色；
颜色：白色；
显示：内联块；
文本对齐：居中；
高度：40px；
宽度：200px；
线高：40px；
边界半径：20px；
字体大小：16px；
-webkit过渡：宽度2.0s；
过渡：宽度2.0s；
文本呈现：优化易读性；
}

你好，世界
这是一个已知的bug，可以使用jQuery animate…Div稍微好一点，但文本更加断断续续