html - 如何将整个网页旋转 90、180 或 270 度？

Question

我想将整个网页旋转 90、180 或 280 度。

答案中给出了如何旋转90度的解决方案 Rotate all html element (whole page) 90 degree with CSS? .如果我将 90 度更改为 270 度，网页将“旋转出屏幕”或不在屏幕中心。我想像旋转显示器一样旋转页面。我的页面从左上角开始。

如何编辑此代码以正确处理 180 度和 270 度？

.wrapper{
    transform: rotate(90deg);
    transform-origin:bottom left;

    position:absolute;
    top:-100vw;

    height:100vw;
    width:100vh;

    background-color:#000;
    color:#fff;

    overflow:auto;
}

Answer 1

transform-origin 是负责此操作的 CSS 属性。它确定元素旋转的点。如果您更改 transform-origin 并旋转元素，则元素的位置会根据您使用的值而改变。您可以将 transform-origin 的值更改为您需要的结果。

这是两个不同的 transform-origin 的示例(将鼠标悬停在它们上面):

.wrapper {
  margin-left: 50px;
  color: white;
  transform-origin: bottom left;
  height: 100px;
  width: 100px;
  background-color: #000;
  color: #fff;
  overflow: auto;
  padding: 10px;
}

.wrapper:hover {
  transition-duration: 0.3s;
  transform: rotate(90deg);
}

.spacerM {
  display: block;
  width: 100%;
  clear: both;
  height: 30px;
}

.correct {
  transform-origin: center;
  background: red;
}

<div class="wrapper">Transform-Origin Bottom Left</div>
<div class="spacerM"></div>
<div class="wrapper correct">Transform-Origin Center</div>