Css динамически вращать div внутри родительского листа оставляет пробелы - PullRequest
Новая
       36

Css динамически вращать div внутри родительского листа оставляет пробелы

1 голос
/ 10 января 2020

У меня есть сетчатая структура, полная прямоугольников, и в настоящее время я использую inline-flex для создания этой сетки.

Прямоугольники почти квадратные.

внутри каждого прямоугольника у меня есть дочерний элемент div содержащий изображение в качестве фона и полное заполнение родительского элемента div.

СЕЙЧАС!

При использовании javascript для поворота внутреннего элемента div с фоном изображения на 90 градусов или на 270 градусов при вращении внутреннего элемента div он оставляет зазоры на краях между внутренним элементом div и родительским элементом div.

Я пытался использовать display = inline-block, block, grid (all), table (all) и все остальное, что я могу придумать.

У меня даже есть возможное решение, однако я не уверен, что это лучшее и 100% полное доказательство.

, если ширина блока равна 178px, а высота - 160px до вращения, после поворота я переключаю высоту и ширину, чтобы ширина стала 160px, а высота - 178px.

Теперь !! я заметил, что я беру самую низкую ширину 160 пикселей и минус большую ширину 178 пикселей, а затем делю ее на 2, я получаю -9 пикселей. если я сделаю позицию абсолютной, слева -9px, блок идеально подходит влево. с высотой я использую Math, abs (-9), для позиции top, и блок теперь подходит безупречно.

Я не чувствую себя комфортно с этим решением.

Как я могу повернуть мой погружение, чтобы соответствовать идеально. 

.flexParent {
  display: block;
  position: absolute;
  width: auto;
  height: auto;
}

.parentBlock {
  display: inline-flex;
  width: 178px;
  height: 160px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.parentBlock>.imageBlock {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  /*background: url('url/to/image.png');*/
  background: url('https://via.placeholder.com/150');
  width: 178px;
  height: 160px;
}

.parentBlock>.imageBlock.rotated {
  transform-origin: center center;
  transform: rotate(270deg);
  background-color: #ff0033;
  height: 178px;
  width: 160px;
  left: -9px;
  top: 9px;
}
<div class="flexParent">
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock rotated"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div </div>

1 Ответ

1 голос
/ 10 января 2020

Вы уверены, что хотите повернуть его на 270 градусов?

Я использовал scale, чтобы повернуть ось X. и убрал ваши новые высоту и ширину

Также добавлены шкала Y и Масштаб X + Y 

.flexParent{
    display:block;
    position:absolute;
    width:auto;
    height:auto;
    }

    .parentBlock{
    display:inline-flex;
    width:178px;
    height:160px;
    align-items: center;
    justify-content: center;
    position:relative;
    }


    .parentBlock > .imageBlock{
    position:absolute;
    left:0px;
    top:0px;
    bottom:0px;
    right:0px;
    margin:auto;
    background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfGN0qNZ6SmotqZMfqcw3HtFx0auXMlYd-9jBwq8M2tPmPxwSWJA&s);
    width:178px;
    height:160px;
    }
    /*scale  X*/
    .parentBlock > .imageBlock.rotated{
    transform-origin:center center;
    transform: scaleX(-1);
    background-color: #ff0033; 
    }
    /*scale  Y*/
    .parentBlock > .imageBlock.yScaled{
    transform-origin:center center;
    transform: scaleY(-1);
    background-color: #ff0033;  
    }
    /*scale both X and Y*/
    .parentBlock > .imageBlock.scaledBoth{
    transform-origin:center center;
    transform: scale(-1, -1);
    background-color: #ff0033;     
    }
    /*Your original method*/
    .parentBlock > .imageBlock.rotateUp{
    transform-origin:center center;
    transform: rotate(270deg);
    background-color: #ff0033;
    height:176px;
    width:158px;
    border:1px solid red;
    }
<div class="flexParent">
    <div class="parentBlock"><div class="imageBlock"></div></div>
    <div class="parentBlock"><div class="imageBlock"></div></div>
    <div class="parentBlock"><div class="imageBlock"></div></div>
    <div class="parentBlock"><div class="imageBlock"></div></div>
    <div class="parentBlock"><div class="imageBlock rotated"></div></div>
    <div class="parentBlock"><div class="imageBlock"></div></div>
    <div class="parentBlock"><div class="imageBlock yScaled"></div></div>
    <div class="parentBlock"><div class="imageBlock scaledBoth"></div></div>
    <div class="parentBlock"><div class="imageBlock"></div></div>
    <div class="parentBlock"><div class="imageBlock rotateUp"></div></div>
    </div>
...