css 动态旋转父级内部的 div 会留下间隙

Question

我有一个充满矩形的网格状结构，目前正在使用内联柔性来创建这个网格。

矩形几乎是正方形。

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

现在！

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

我尝试使用显示=内联块，块，网格(全部(，表(全部(和我能想到的其他一切。

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

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

现在！！ 我注意到我取 160px 的最小宽度并减去 178px 的较大宽度，然后将其除以 2 我得到 -9px。 如果我将位置设为绝对位置，左 -9px，则块完全适合左边。 对于高度，我使用数学，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>

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

我想通了。使用绝对位置，左：50%，顶部：50%，转换：翻译(-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 的顺序非常重要。不幸的是，由于某种原因，我无法在此处发布答案。希望这对你有帮助。