如何让N×N网格围绕容器中心旋转（替代容器直接旋转）

问题背景 #

现有一个2×2网格容器，无法直接旋转容器本身，只能通过旋转网格内的元素，让整体视觉效果等同于旋转了容器。我已经找到2×2网格的解决方法：给每个元素设置对应的旋转原点，再统一旋转角度，就能模拟出容器旋转的效果。

2×2网格的实现代码 #

.img1{
  -webkit-transform: rotate(10deg);
  -webkit-transform-origin: bottom right;
}
.img2{
  -webkit-transform: rotate(10deg);
  -webkit-transform-origin: bottom left;
}
.img3{
  -webkit-transform: rotate(10deg);
  -webkit-transform-origin: top right;
}
.img4{
  -webkit-transform: rotate(10deg);
  -webkit-transform-origin: top left;
} 

但这个方案只适用于2×2网格，现在需要找到适用于任意N×N网格的通用解决方案。

通用解决方案 #

核心思路是：每个网格元素的旋转原点，需要对应到容器中心的对称点，这样所有元素围绕各自原点旋转相同角度后，整体视觉就会等同于容器围绕中心旋转。

具体计算方法 #

假设网格容器的边长为containerSize，每个网格元素的边长为cellSize = containerSize / N。对于网格中位置为(row, col)的元素（行和列从0开始计数，左上角为(0,0)）：

1. 计算元素自身的中心坐标相对于容器左上角的位置：cellCenterX = (col + 0.5) * cellSize，cellCenterY = (row + 0.5) * cellSize
2. 计算容器中心坐标：containerCenterX = containerSize / 2，containerCenterY = containerSize / 2
3. 计算元素旋转原点相对于自身左上角的偏移量：
   • 原点X偏移：originX = containerCenterX * 2 - cellCenterX
   • 原点Y偏移：originY = containerCenterY * 2 - cellCenterY
4. 将偏移量转换为百分比（更通用，无需依赖具体尺寸）：
   • originXPercent = (originX / cellSize) * 100%
   • originYPercent = (originY / cellSize) * 100%

代码实现示例（以CSS变量结合Sass循环为例） #

假设N=3，容器使用CSS Grid布局：

.grid-container {
  --n: 3;
  --cell-size: calc(100% / var(--n));
  display: grid;
  grid-template-columns: repeat(var(--n), var(--cell-size));
  grid-template-rows: repeat(var(--n), var(--cell-size));
  width: 400px;
  height: 400px;
}

.grid-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  transform: rotate(10deg);
}

用Sass循环自动生成每个单元格的旋转原点：

$n: 3;
@for $row from 0 through $n - 1 {
  @for $col from 0 through $n - 1 {
    $cell-center-x: ($col + 0.5) / $n * 100%;
    $cell-center-y: ($row + 0.5) / $n * 100%;
    $origin-x: 100% - $cell-center-x + 50%;
    $origin-y: 100% - $cell-center-y + 50%;
    .grid-cell:nth-child(#{$row * $n + $col + 1}) {
      transform-origin: #{$origin-x} #{$origin-y};
    }
  }
}

原理说明 #

每个元素围绕容器中心的对称点旋转，相当于把容器旋转的效果拆解到了每个元素上。因为容器旋转时，每个元素的运动轨迹就是围绕容器中心做圆周运动，而让元素围绕自身的对称点旋转相同角度，就能完全模拟这个轨迹，最终整体视觉和容器直接旋转一致。

内容的提问来源于stack exchange，提问作者ashish