我有一个带有框的容器，在单击按钮时使用 transformX 在边界内从左向右移动(如缩略图滚动)。容器以 transform: translateX(0px); 开头。我正在为 translateX 使用 px 值，我的数学就是基于此。问题是当我测试 dir=rtl 网站时，容器被翻转了。处理 rtl 方向的最简单方法是什么？我很确定我什至不想知道 javascript 中的目录。
这是一个粗略的演示，它没有滑动或任何东西，只是为了澄清。
.wrap {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 100px;
overflow: hidden;
}
.container {
position: absolute;
width: 1450px;
transform: translateX(0px);
}
.box {
position: relative;
float: left;
width: 100px;
height: 100px;
margin-right: 1px;
background: red;
}<html dir="rtl">
<div class="wrap">
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
</div>
</div>最佳答案
使用 CSS 检测 RTL 并覆盖必要的值:
[dir="rtl"] .wrap {
...
}
[dir="rtl"] .container {
...
}
[dir="rtl"] .box {
...
}
根据您想要实现的目标，您可能最终会为 translateX 使用相同像素大小的负值。您可能还需要覆盖任何左焦点或右焦点样式(左、右边距、 float 等)
关于javascript - CSS transformX 和 dir rtl，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52974931/