Javascript 如何将宽度从右向左转换，而不是从默认的左向右？

仍然在开发这个该死的UI，我之前已经发布过几次了。我现在几乎已经完成了工作转换等，但我正在努力与左容器

正确的容器（麦克风图标）正是我想要的。麦克风与人像齐平，悬停在麦克风上方以激活过渡（我确实希望这是一个按键[M]，但这是另一个障碍），麦克风图标/bg和容器滑出，进入可视范围

我尝试将同样的转换应用于左容器，认为这将是一个简单的解决方案，用于从右到左的宽度转换，而不是默认的从左到右

有人能帮我吗？我见过有人使用面具，并在宽度转换时从左向右滑动面具，但我不确定当我把这个UI放到游戏中时，效果会如何

另外，如果有人能帮我使用keypress JS，那将是一个巨大的好处，因为我在这方面几乎没有什么用处。（我希望右容器在按键[M]时激活，左容器在按键[K]时激活

提前谢谢

。阳性{
颜色：rgb（114204114）；
}
.否定{
颜色：rgb（224,50,50）；
}
.tempbg{
背景：线性梯度（#e66465，#9198e5）；
背景重复：无重复；
背景尺寸：1920像素1080像素；
}
masscont先生{
背景色：rgba（0,0,0,0）；
位置：粘性；
顶部：50px；
左：552px；
宽度：260px；
高度：85px；
z指数：1；
}
.肖像{
背景图像：url（“https://gdurl.com/VKq8");
位置：固定；
顶部：34px；
左：360px；
宽度：120px；
高度：120px；
边界半径：110像素；
z指数：3；
显示：块；
不透明度：1；
}
.集装箱{
背景色：rgba（0,0,0,237）；
位置：绝对位置；
顶部：45px；
左：-95px；
宽度：0px；
高度：85px；
边界半径：50px；
边框左下半径：0%；
边框左上半径：0%；
z指数：1；
不透明度：1；
显示：块；
过渡：宽度1.2s立方贝塞尔（0.24,0.26,0.63,0.93）；
}
.容器：悬停{
宽度：260px；
}
/*#治愈、盔甲、饥饿、口渴、耐力、声音{
}*/
#boxHeal、#boxArmor、#BoxRestant、#boxHunger、#BoxHustem、#boxVoice{
宽度：100%；
身高：100%；
过渡：0.2s缓进缓出；
}
#治愈{
位置：绝对位置；
左：26px；
底部：70像素；
宽度：0px；
高度：10px；
填充：0；
浮动：左；
过渡：宽度1s，易于进出；
}
.容器：悬停#治疗{
宽度：140px；
}
.容器：悬停#装甲{
宽度：140px；
}
#盔甲{
位置：绝对位置；
左：27px；
底部：54px；
宽度：0px；
高度：10px；
过渡：宽度1s，易于进出；
}
#饥渴{
位置：绝对位置；
左：62px；
底部：28px；
宽度：0px；
高度：10px；
过渡：宽度1s，易于进出；
}
.容器：悬停#饥饿{
宽度：113px；
}
伊肯洪格先生{
位置：相对位置；
左：-40px；
底部：10px；
z指数：3；
对齐内容：左对齐；
}
#渴{
位置：绝对位置；
左：22px；
底部：54px；
宽度：0px；
高度：10px；
填充：0；
浮动：左；
过渡：宽度1s，易于进出；
}
.容器：悬停#干渴{
宽度：113px；
}
.第一{
位置：相对位置；
左：0.5px；
底部：-29.5px；
z指数：3；
对齐内容：左对齐；
}
#耐力{
位置：绝对位置；
左：62.5px；
底部：1px；
宽度：0px；
高度：10px；
填充：0；
浮动：左；
过渡：宽度1s，易于进出；
}
.容器：悬停#耐力{
宽度：113px；
}
伊康斯塔米娜先生{
位置：绝对位置；
z指数：3；
对齐内容：左对齐；
左-36px；
底部：-3px；
}
#声音{
位置：绝对位置；
左：200px；
底部：-00px；
宽度：107.5px；
高度：10px；
填充：0；
浮动：左；
}
.fa话筒{
位置：绝对位置；
z指数：3；
左：69px；
底部：25px；
颜色：#525151；
字号：38px；
}
.fa话筒BG{
位置：绝对位置；
顶部：-75px；
左：-90px；
宽度：121px；
高度：85px；
背景图像：
径向梯度（0%50%的圆，rgba（0,0,0,0）50px，#fff 51px）；
边框右上角半径：40px；
边框右下半径：40px；
z指数：3；
转换：左1秒轻松输入输出；
}
.masscont:hover#fa话筒bg{
左：80px；
}
#博克斯海勒{
背景：rgba（97191921）；
边框：实心0.3pxRGB（9719192）；
边界半径：30px；
}
#箱甲{
背景：rgb（96136220）；
边框：实心0.3pxRGB（96136220）；
边界半径：180像素；
边界：-5px；
}
#饥饿{
背景：rgb（255、255、255）；
位置：绝对位置；
左：-10px；
底部：7px；
边框：实心0.3px#ffffff；
边界半径：30px；
}
#箱口渴{
背景：rgb（255、255、255）；
位置：绝对位置；
左：30px；
底部：-34px；
边框：实心0.3px#ffffff；
边界半径：30px；
}
#耐力{
背景：rgb（255、255、255）；
位置：绝对位置；
左：-10px；
底部：4px；
边框：实心0.3px#ffffff；
边界半径：30px；
}
#boxVoice{
背景：rgb（180,180,180）；
位置：绝对位置；
z指数：4；
高度：27px；
宽度：14.2px；
左：6.2px；
底部：11px；
边界半径：30px；
}
#boxVoice.active{
背景：rgb（4619666）；
}
.职位{
字体系列：“gta ui”，Verdana，Tahoma；
字体大小：30px；
位置：绝对位置；
底部：0.35%；
左：16%；
文本阴影：-1px 1px 2px#000，1px 1px 2px#000，1px-1px 0#000，-1px-1px 0#000；
颜色：#ffffff；
}
.分离器{
颜色：rgb（224,50,50）；
}
.分隔符2{
颜色：rgb（240、200、80）；
}
.walletcont{
背景色：rgba（0,0,0,0.288）；
位置：绝对位置；
z指数：2；
顶部：50px；
左：120px；
宽度：260px；
高度：85px；
边界半径：50px；