CSS transformX и dir rtl - PullRequest
Новая
       18

CSS transformX и dir rtl

0 голосов
/ 24 октября 2018

У меня есть контейнер с ящиками, которые перемещаются слева направо в пределах границ (как прокрутка миниатюр) с transformX при нажатии кнопки.Контейнер начинается с преобразования: translateX (0px) ;.Я использую значения px для translateX, и моя математика основана на этом.Проблема в том, что когда я тестирую сайт dir = rtl, контейнер переворачивается.Что было бы самым простым способом справиться с направлением rtl?Я почти уверен, что даже не хочу знать dir в 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>

Ответы [ 3 ]

0 голосов
/ 24 октября 2018

Я думаю, что проблема в том, что вы используете float:left, я изменил ваш css для коробки, чтобы использовать display:inline-block, посмотрите, если это то, что вы ищете. 

.wrap {
  position: absolute;
  width: 400px;
  height: 100px;
  overflow: hidden;
}

.container {
  position: absolute;
  width: 1450px;
  transform: translateX(500px);

}

.box {
  position: relative;
  display:inline-block;
  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>
0 голосов
/ 24 октября 2018

Вам не нужно float:left для .box css.Вместо этого добавьте display:inline-block;, он начнет работать в обоих направлениях.

См. Фрагмент ниже. 

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 100px;
  overflow:hidden;
}

.container {
  position: absolute;
  width: 1450px;
  transform: translateX(0px);
}

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 1px;
  background: red;
  display:inline-block;
}
<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>
0 голосов
/ 24 октября 2018

Используйте CSS для определения RTL и переопределения необходимых значений: 

[dir="rtl"] .wrap {
    ...
}

[dir="rtl"] .container {
    ...
}

[dir="rtl"] .box {
    ...
}

В зависимости от того, чего вы хотите достичь, вы можете просто использовать отрицательные значения одинаковых размеров пикселей для translateX.Вам также может потребоваться переопределить любые стили, ориентированные влево или вправо (влево, поле вправо, с плавающей точкой и т. Д.)

...