Css 动态旋转 div 在父级内部留下间隙

Question

我有一个充满矩形的网格状结构，目前正在使用 inline-flex 创建此网格。

长方形几乎就是正方形。

inside 每个矩形我都有一个子 div 包含图像作为背景，并完全填充父 div。

现在！

当使用 javascript 将带有图像背景的内部 div 旋转 90 度或 270 度时，当内部 div 旋转时，它会在内部 div 之间的边缘留下间隙=42=] 和父 div.

我已经尝试过使用 display = inline-block, block, grid (all), table(all) 和我能想到的所有其他东西。

我什至有一个可能的解决方案，但我不确定它是最好的和 100% 完整的证明。

如果块旋转前宽度为178px，高度为160px，旋转后我切换高度和宽度，宽度变为160px，高度变为178px。

现在！！我注意到我取了 160px 的最小宽度减去 178px 的较大宽度，然后 divide 它乘以 2 我得到 -9px。如果我将位置设置为绝对位置，左 -9px，则该块完全适合左侧。我使用 Math,abs(-9) 的高度作为顶部位置，块现在完美贴合。

我对这个解决方案感到不舒服table。

如何旋转我的 dive 以使其完全适合。

.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>

Answer 1

您确定要旋转 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>

Answer 2

我明白了。使用绝对位置，left:50%, top:50%, transform: translate(-50%, -50%);但必须按以下方式进行：

<style> div.parent{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:150px; height: 220px; background-color: red; } div.child { position:absolute; left:50%; top:50%; transform-origin: center center; transform: translate(-50%, -50%) rotate(90deg); height: 100px; width: 160px; background: limegreen; color: white; font-family: sans-serif; }
</style>

childcss的顺序很重要。不幸的是，由于某些原因我无法 post 在这里回答..希望这对你有帮助。

Css 动态旋转 div 在父级内部留下间隙

Css dynamically rotate a div inside parent leaves gaps

html

javascript

css

jquery

rotatetransform