Как центрировать повернутый прямоугольник в его верхнем левом исходном местоположении - PullRequest
Новая
       12

Как центрировать повернутый прямоугольник в его верхнем левом исходном местоположении

0 голосов
/ 26 февраля 2019

Примечание. Исходное сообщение было удалено вместе с его пользователем, и, поскольку я обнаружил, что оно может быть полезным, я разместил его повторно.

Прямоугольник должен быть повернут на -90 градусови быть в центре по вертикали в левой части экрана.Как видно на рисунке ниже.

Если возможно, следует использовать только HTML и CSS.

How it should look

Проблема заключается в том, чтобы сначала повернуть элемент, что затрудняет центрирование.

Фрагмент стека 

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>

Ответы [ 3 ]

0 голосов
/ 26 февраля 2019 
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;
      }

Создайте еще один родительский div для «Lorem Ipsum» и примените «display: flex; align-items: center; align-content: center;»свойства родительского div, чтобы избежать присвоения flex тегу body.Надеюсь, это поможет.

0 голосов
/ 28 февраля 2019

Понял.Пожалуйста, попробуйте ниже 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 и работал.

0 голосов
/ 26 февраля 2019

Чтобы лучше контролировать вращение и легче выравнивать его по левому краю и центрировать его по вертикали, используйте оба параметра transform-origin и transform.

Сначаласделайте его левый / верхний угол центром вращения, добавив transform-origin: left top; к 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 скрипты, показывающие 4 шага, которые, надеюсь, сделают его более понятнымкак это работает:

Шаг 1 - Шаг 2 - Шаг 3 - Шаг 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>
...