css 网格中的正方形旋转会产生间隙

Question

在 css 网格内旋转正方形 div 会产生间隙。为什么？

这是一个简单的例子：

div {
    height:100%;
    width: 100%;
    margin:0;
    display:block;
}

.square{ 
    background: skyBlue;
}

.rotate{
    transform:rotate(180deg);
}

#grid {
    display: grid;
    height:100vmin;
    width: 100vmin;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(6, 1fr);

    background: white;
    border: 1px solid black;
    margin: auto;
}

<div id=grid>
     <div style="grid-row: 1; grid-column:2">normal</div>
     <div class="square" style="grid-row: 2; grid-column:2"></div>
     <div class="square" style="grid-row: 3; grid-column:2"></div>
     <div class="square" style="grid-row: 4; grid-column:2"></div>


     <div style="grid-row: 1; grid-column:4">rotated (180deg)</div>
     <div class="square rotate" style="grid-row: 2; grid-column:4"></div>
     <div class="square rotate" style="grid-row: 3; grid-column:4"></div>
     <div class="square rotate" style="grid-row: 4; grid-column:4"></div>
</div>

在截取的代码中，可以看到 右侧列网格之间的小间隙 。只有旋转的网格之间似乎有间隙，而“正常”（未旋转）网格的左列看起来很平滑。

为什么旋转后会出现空隙？我该如何解决？

Answer 1

能否看到细线取决于browser/screen/zoom级别。

例如，在 Chrome 上，我放大了你的代码片段，然后这条线来来去去。

我觉得这个问题就像一个舍入error/edge的效果。系统正在尝试找出如何处理部分像素 - 在这种情况下，蓝色元素的高度是通过计算获得然后旋转的网格 space 的百分比。它并不是每次都得出一个精确的整数。在现代屏幕上，它必须转换为一个 CSS 像素可以是几个屏幕像素。有时一些屏幕像素 'get left behind'。（注意细线很细，还不到一个CSS像素）。

查看您的代码的一种怪异方法是将旋转的 div 的大小增加几个像素并相应地重置其位置。这可能适合也可能不适合您的现实生活情况。

div {
  height: 100%;
  width: 100%;
  margin: 0;
  display: block;
}

.square {
  background: skyBlue;
}

.rotate {
  transform: rotate(180deg);
}

#grid {
  display: grid;
  height: 100vmin;
  width: 100vmin;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(6, 1fr);
  background: white;
  border: 1px solid black;
  margin: auto;
}

.rotate {
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  margin-top: -1px;
  margin-left: -1px;
}

<div id=grid>
  <div style="grid-row: 1; grid-column:2">normal</div>
  <div class="square" style="grid-row: 2; grid-column:2"></div>
  <div class="square" style="grid-row: 3; grid-column:2"></div>
  <div class="square" style="grid-row: 4; grid-column:2"></div>


  <div style="grid-row: 1; grid-column:4">rotated (180deg)</div>
  <div class="square rotate" style="grid-row: 2; grid-column:4"></div>
  <div class="square rotate" style="grid-row: 3; grid-column:4"></div>
  <div class="square rotate" style="grid-row: 4; grid-column:4"></div>
</div>

css 网格中的正方形旋转会产生间隙

square rotate in css grid creates gaps

html

css

css-transforms

css-grid