html - 如何将旋转的矩形居中在其左上角的原始位置

Question

注意:原来的帖子连同它的用户一起被删除了，我发现它可能有用，所以我重新发布了它。

---

矩形应旋转 -90 度并在屏幕左侧垂直居中。如下图所示。

如果可能，应仅使用 HTML 和 CSS。

问题是，首先旋转元素，这使得它更难居中。

堆栈片段

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body>div {
  position: fixed;
  top: 50%;
  left: 0;
  background-color: #FF0000;
  color: white;
  font-weight: bold;
  padding: 10px;
  -webkit-transform: rotate(-90.0deg);
  -moz-transform: rotate(-90.0deg);
  -ms-transform: rotate(-90.0deg);
  -o-transform: rotate(-90.0deg);
  transform: rotate(-90.0deg);
}

<div>Lorem Ipsum</div>

Answer 1

为了更好地控制旋转，更容易地左对齐和垂直居中，同时使用 transform-origin 和 transform .

首先通过添加transform-origin: left top;使其左/上 Angular 为旋转中心到 div .

二、结合rotate和 translate , 将其向左移动其自身宽度的一半 ( translateX(-50%) ), 然后将其逆时针旋转 90 度 rotate(-90.0deg) .

注释 1；使用多个时 <transform-function> 值，它们从右到左执行，在下面的示例中意味着它以 translateX 开头.

注释 2；我临时删除了前缀属性，因此您需要将它们添加回来。

堆栈片段

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: Arial, sans-serif;
  background-color: #ccc;
 }

* {
  box-sizing: border-box;
}

body>div {
  position: fixed;
  top: 50%;
  left: 0;
  background-color: #FF0000;
  color: white;
  font-weight: bold;
  padding: 10px;
  transform-origin: left top;
  transform: rotate(-90.0deg) translateX(-50%);
}

<div>Lorem Ipsum</div>

---

评论后更新。

这里有 4 个 fiddle ，展示了 4 个步骤，希望能更清楚地说明这是如何工作的:

<罢工> Step 1 - Step 2 - Step 3 - Step 4

这是一个动画，展示了它是如何移动的，希望能更清楚地说明它是如何工作的:

html, body {
  margin: 0;
  font-size: 16px;
  font-family: Arial, sans-serif;
 }

.faked-body div {
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #FF0000;
  color: white;
  font-weight: bold;
  padding: 10px;
  transform-origin: left top;    /*  the rotation center is moved to black circle  */
  transform: rotate(0)
             translateX(0);
  animation: the-div 3s 1s forwards;
}

@keyframes the-div {
  0%   { transform: rotate(0)
                    translateX(0);
  }
  50%  { transform: rotate(0)
                    translateX(-50%);  /*  move to left */
  }
  100% { transform: rotate(-90deg)     /*  rotate 90 degree */
                    translateX(-50%);
  }
}


/*  styling/info for this demo  */
.faked-body div::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  animation: the-spot 1.5s 1s forwards;
}
.faked-body {
  position: relative;
  margin: 10px 60px;
  width: 440px;
  height: 200px;
  background-color: #ccc;
  font-size: 14px;
}
.faked-body::before {
  content: 'The gray area represents the body so we can see how the "Lorem Ipsum" element moves';
  color: #666;
}
.faked-body::after {
  content: 'The black spot show where the rotation center is';
  color: #222;
  position: absolute;
  bottom: 0; left: 0;
}
@keyframes the-spot {
  0%   { left: 0;
  }
  100% { left: 50%;
  }
}

<div class="faked-body">
  <div>Lorem Ipsum</div>
</div>