如何将整个网页旋转90度，180度或270度？

Posted 2021-04-17

我想将整个网页旋转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;
}

答案

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

这是两个不同的transform-origins（悬停在它们上面）的示例：

.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>

另一答案

扩展上面提到的the answer，我能够使用以下样式进行90,180和270度页面旋转。 90和270需要transform-origin和top，但180不需要。

// 90 degrees
.wrapper {
  transform: rotate(90deg);
  transform-origin: bottom left;
  top: -100vw;
  height: 100vw;
  width: 100vh;
  position: absolute;
}

// 180 degrees
.wrapper {
  transform: rotate(180deg);
  height: 100vh;
  width: 100vw;
  position: absolute;
}

// 270 degrees
.wrapper {
  transform: rotate(270deg);
  transform-origin: top left;
  top: 100vh;
  height: 100vw;
  width: 100vh;
  position: absolute;
}

以上是关于如何将整个网页旋转90度，180度或270度？的主要内容，如果未能解决你的问题，请参考以下文章

将Opencv矩阵旋转90、180、270度[重复]

Google Vision OCR，将文字坐标从 90、180、270 个文档中旋转到 0 度

通过transpose和flip实现图像旋转90/180/270度

网页中图片旋转的几种实现方式

在 Quickblox 中，我们如何在 Android 应用程序 (QBRTCSurfaceView) 中旋转视频（例如 90 度）？

将下面矩阵分别按顺时针90度，逆时针90度，和旋转180度，打印出来