Div比容器旋转偏离中心更宽

Question

我正在尝试创建一个对角覆盖浏览器窗口的div。见这里的例子：

这是我的CSS：

.shape {
  height: 100%;
  width: 150%;
  transform: rotate(25deg);
}

这是我的实际结果：

我尝试使用transformOrigin并设置div的顶部和左侧的一些不同的东西，但似乎没有任何东西可以让这个div在浏览器的对角线上居中。

Answer 1

您需要添加以下内容： transform-origin：center;

当宽度超过100％时，您需要在旋转前将内容移动到居中位置。喜欢位置：绝对;左：-25％;

    body {
        padding: 0px;
        margin: 0px;
    }
    .frame {
        width: 100vw;
        height: 100vh;
        background: #EFEFEF;
    }
    .rotated {
      position: absolute;
      left: -25%;
      width: 150%;
      height: 100%;
      border: 2px solid blue;
      transform: rotate(25deg);
      transform-origin: center;
    }

      <div class='frame'>
          <div class='rotated'></div>
      </div>