CSS Transform: Scale смещает перекрывающиеся div - PullRequest
Новая
       15

CSS Transform: Scale смещает перекрывающиеся div

0 голосов
/ 17 апреля 2019

Я создал ленту CSS с другой лентой CSS позади первой, которая будет служить тенью.

Я пытаюсь масштабировать оба из них вместе.

Я завернул ленты в div и применил transform: scale к этому родителю div. Вместо того чтобы увеличивать или сжимать ленты, как ожидалось, они смещались.

Что приводит к тому, что ленты выходят из выравнивания при применении scale, и как это можно исправить? 

.container {
  align-items: center;
  display: flex;
  justify-content: center;
}
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container {
  transform: scale(0.8);
}
.bookmark,
.bookmark-shadow {
  border: 0.7em solid;
  border-bottom-color: transparent;
  box-shadow: 0 -1em;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 0;
  text-align: center;
  vertical-align: middle;
  width: 0;
}
.bookmark {
  color: #337ab7;
  position: relative;
  z-index: 10;
}
.bookmark-shadow {
  border: 0.75em solid;
  border-bottom-color: transparent;
  color: rgba(64, 64, 64, 0.5);
  margin-left: -0.05em;
  position: absolute;
  top: 0.9em;
  z-index: 5;
}
<div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
</div>

1 Ответ

1 голос
/ 18 апреля 2019

Дети

Изменение размера элементов, а не родительского элемента. Это дает более точные результаты. 

.container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container div {
  transform: scale(0.8);
}

.bookmark,
.bookmark-shadow {
  border: 0.7em solid;
  border-bottom-color: transparent;
  box-shadow: 0 -1em;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 0;
  text-align: center;
  vertical-align: middle;
  width: 0;
}

.bookmark {
  color: #337ab7;
  position: relative;
  z-index: 10;
}

.bookmark-shadow {
  border: 0.75em solid;
  border-bottom-color: transparent;
  color: rgba(64, 64, 64, 0.5);
  margin-left: -0.05em;
  position: absolute;
  top: 0.9em;
  z-index: 5;
}
<div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
</div>

Фактически, элементы здесь не связаны между собой. По этой причине можно вычислить ".7em" значение с ".75em" значением как ".05em" математически. Но когда измерение входит в работу, браузеры округляют некоторые значения. Вот почему 0,05em в «Scale 100%», «Scale 80%» не рассчитывается по формуле 0.05 * 80/100. Естественно, темпы роста или усадки обоих отдельных элементов не совпадают точно.

К сожалению, в браузерах есть такая возможность. Потому что также возможно увидеть то же самое в SVG форматах. Если point не связан друг с другом, две «разные» шкалы дают разные результаты.

Еще один: ограничение по родителю

Чтобы получить точный результат, было бы разумнее использовать элементы во вложенных элементах. ::before ::after Это возвращает вас в качестве элемента для «закладки». 

.container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container {
  transform: scale(0.8);
}

.bookmark {
  box-sizing: border-box;
  color: #337ab7;
  cursor: pointer;
  display: inline-block;
  height: 0;
  box-shadow: 0 -1em;
  text-align: center;
  vertical-align: middle;
  width: 0;
  position: relative;
}

.bookmark::before {
  content: "";
  color: #337ab7;
  box-shadow: 0 -1em;
  border: 0.7em solid;
  border-bottom-color: transparent;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 10;
}

.bookmark::after {
  content: "";
  color: rgba(64, 64, 64, 0.5);
  border: 0.75em solid;
  box-shadow: 0 -1em;
  border-bottom-color: transparent;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 5;
}
<div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
  </div>
</div>

Как я упоминал выше, кажется, что есть две перекрывающиеся тени. Но это касается только браузера. Если вы подходите слишком близко, вы на самом деле выглядите более гладко.

enter image description here

...