Javascript Css动态旋转父对象内部的div

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

矩形几乎是正方形

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

现在

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

我试过使用display=inlineblock、block、grid（all）、table（all）和我能想到的所有东西

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

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

现在！！我注意到我取最小的宽度160px减去较大的宽度178px，然后除以2得到-9px。 如果我将位置设为绝对，左-9px，则块完全适合左。 我用数学的高度，abs（-9），作为顶部的位置，现在这个方块完美地贴合了

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

我如何旋转我的跳水动作，使之完美贴合

.flexParent{
显示：块；
位置：绝对位置；
宽度：自动；
高度：自动；
}
.父块{
显示：内联flex；
宽度：178px；
高度：160px；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
.parentBlock>.imageBlock{
位置：绝对位置；
左：0px；
顶部：0px；
底部：0px；
右：0px；
保证金：自动；
/*背景：url（'url/to/image.png'）*/
背景：url（'https://via.placeholder.com/150');
宽度：178px；
高度：160px；
}
.parentBlock>.imageBlock.rotated{
变换原点：中心；
变换：旋转（270度）；
背景色：#ff0033；
高度：178px；
宽度：160px；
左：-9px；
顶部：9px；
}

是否确实要将其旋转270度

我使用
scale
轻拍X轴。并删除了你的新高度和宽度

还添加了比例Y和比例X+Y


.flexParent{
显示：块；
位置：绝对位置；
宽度：自动；
高度：自动；
}
.父块{
显示：内联flex；
宽度：178px；
高度：160px；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
.parentBlock>.imageBlock{
位置：绝对位置；
左：0px；
顶部：0px；
底部：0px；
右：0px；
保证金：自动；
背景：url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfGN0qNZ6SmotqZMfqcw3HtFx0auXMlYd-9JBWQ8M2TPMXWSWJA&s）；
宽度：178px；
高度：160px；
}
/*比例X*/
.parentBlock>.imageBlock.rotated{
变换原点：中心；
转换：scaleX（-1）；
背景色：#ff0033；
}
/*鳞片Y*/
.parentBlock>.imageBlock.yScaled{
变换原点：中心；
变换：scaleY（-1）；
背景色：#ff0033；
}
/*缩放X和Y*/
.parentBlock>.imageBlock.scaledAll{
变换原点：中心；
变换：比例（-1，-1）；
背景色：#ff0033；
}
/*你原来的方法*/
.parentBlock>.imageBlock.rotateUp{
变换原点：中心；
变换：旋转（270度）；
背景色：#ff0033；
高度：176像素；
宽度：158px；
边框：1px纯红；
}
我想出来了。使用绝对位置，左：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>

div.parent{位置：绝对；顶部：50%；左侧：50%；变换：平移（-50%，-50%）；宽度：150px；高度：220px；背景色：红色；}div.child{位置：绝对；左侧：50%；顶部：50%；变换原点：中心；变换：平移（-50%，-50%）旋转（90度）；高度：100px；宽度：160px；背景：灰色；颜色：白色；字体系列：无衬线；}

子css的顺序非常重要。不幸的是，由于某些原因，我不能在这里发布答案。。希望这对您有所帮助。
您好，谢谢您的回复。基本上，旋转是动态的，如果旋转落在0度或180度上，则没有问题，但出于某些奇怪的原因，它仅落在90度和270度上。旋转以90度的增量工作。。。这种方法似乎适用于您的代码，我将在我的代码中尝试，并让您知道。只是出于兴趣，为什么选择-1作为刻度？关于Antonyscale-1用于飞轴。基本上2变成-2等。如果你需要相同大小的盒子，用你的旋转方法，我会创建1x1的盒子-然后你的问题就不会发生。这是一个有趣而干净的旋转函数方法，我现在还不知道旋转的比例。。。我的块大小也是动态创建的，所以我可以控制它，这取决于设备的宽度和高度。。我想使用你的方法，有没有一种方法可以在这个缩放方法中添加过渡效果来旋转图像，并在两个方向上旋转？示例：如果我使用css rotate（），我可以使用-270度进行逆时针旋转，或者使用270度进行顺时针旋转并转换变换，提供正向和反向动画效果，这种效果对我的脚本至关重要。有没有一种方法可以让天平产生同样的效果？让你所有的元素都是完美的正方形，它是固定的