Question

我希望将整个网页旋转90度，180度或280度。

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

如何编辑此代码以正确使用180度和270度？

<textarea readonly> TEST </textarea>

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

// 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度？

2 个答案: