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

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;添加到div使其左/上角为旋转中心。

其次，将rotate和translate组合在一起，将其向左（translateX(-50%)）移一半，然后将其rotate(-90.0deg)逆时针旋转90度。

注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个小提琴，显示了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>

Answer 2

We can use the 'text-orientation' property instead of 'rotate'.
I tried the below code and it worked for me.
 html,
 body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-size: 16px;
        font-family: Arial, sans-serif;
        display: flex;
        align-items: center;
        align-content: center;
      }
body > div {
        background-color: #ff0000;
        color: white;
        font-weight: bold;
        padding: 10px;
        width: auto;
        height: auto;
        writing-mode: vertical-rl;
        text-orientation: upright;
      }

为“ Lorem Ipsum”创建另一个父div并应用“ display：flex;             align-items：居中;             align-content：center;”父div的属性，以避免为'body'标签提供弹性。 希望对您有所帮助。

Answer 3

了解。请尝试以下CSS，它可能会解决您的问题。

body, html {
  height: 100%;
  display: grid;
  font-size: 16px;
  font-family: Arial, sans-serif;
}
div {
  margin: auto auto auto 10;
    background-color: #FF0000;
    -webkit-transform: rotate(-90.0deg);
    -moz-transform: rotate(-90.0deg);
    -ms-transform: rotate(-90.0deg);
    -o-transform: rotate(-90.0deg);
    transform: rotate(-90.0deg);
    padding: 10px;
}

仅供参考：我在chrome和safari上进行了测试，并且可以正常工作。