Css动态旋转父级内部的div留下间隙答案

【问题标题】：Css dynamically rotate a div inside parent leaves gapsCss动态旋转父级内部的div留下间隙
【发布时间】：2020-01-10 12:28:52
【问题描述】：

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

矩形几乎是正方形。

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

现在！

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

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

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

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

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

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

如何旋转我的潜水以完美契合。

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

【问题讨论】：

让你所有的元素都完美的正方形并且它是固定的

标签： javascript jquery html css rotatetransform

【解决方案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>

【讨论】：

您好，感谢您的回复。基本上旋转是动态的，如果旋转落在 0 度或 180 度上没有问题，但由于某些奇怪的原因，它只有 90 度和 270 度。旋转以 90 度为增量工作......这个方法似乎适用于您的代码，我会用我的代码尝试它并让您知道。只是出于兴趣，您为什么选择 -1 作为量表？关于安东尼
scale -1 用于浮动轴。基本上 2 变成了 -2 等等，这会破坏盒子
如果您需要相同的尺寸，使用您的旋转方法，我会创建 1x1 框 - 那么您的问题就不会发生
这是一种有趣且干净的旋转功能方法，直到现在我才知道旋转的比例......我的块大小也是动态创建的，所以我可以控制它，取决于设备宽度和高度..我想使用您的方法，有没有办法为这种缩放方法添加过渡效果以旋转图像，并在两个方向上进行旋转？示例：如果我使用 css rotate()，我可以将它与 -270deg 一起用于逆时针旋转或 270deg 用于顺时针旋转并转换变换，
同时提供正向和反向动画效果，这种效果对我的脚本至关重要。有没有办法与规模有相同的效果？

【解决方案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>

子css的顺序很重要。不幸的是，由于某种原因，我无法在此处发布答案..希望这对您有所帮助。

【讨论】：