Поместите братьев и сестер при использовании масштабирования со свойством transform - PullRequest
Новая
       49

Поместите братьев и сестер при использовании масштабирования со свойством transform

0 голосов
/ 24 октября 2019

Я реализую свойство CSS transform для деления, и у меня есть сценарий использования для перемещения братьев и сестер, которые расположены рядом с ним в соответствии с масштабированием.

Я пытался отрегулировать позиции, но ничего не получилось и подумалВот как функционирует преобразование. Я могу ошибаться, поэтому хочу дать еще одну попытку здесь. 

.parent{
  display:flex;
}
.childA{
  padding: 1rem;
  width: 20rem;
  background: lightblue;
}
.childA:hover {
  transform: scale(5);
  transform-origin:top left;
  z-index:0;
}
.childB {
  border: solid 1px;
  color:white;
  padding: 1rem;
  background: red;
  z-index:1 /*Not sure why I had to do this too*/
}
<div class='parent'>
   <div class='childA'>Child A scales</div>
   <div class='childB'>I want to move when scaled</div>
</div>

Пожалуйста, посмотрите на эту игровую площадку, где дочерний элемент просто находится там, но мне нужно, чтобы он двигался вправо https://codepen.io/frank-underwood/pen/jOOmLJO?editors=1100

Ответы [ 3 ]

1 голос
/ 24 октября 2019

Если вы можете настроить структуру HTML, вы можете легко сделать это: 

.parent{
  display:flex;
}
.leftDiv{
  background:yellow
}
.childA{
  padding: 1rem;
  background: lightblue;
  position:relative;
}
.childA:hover {
  transform: scale(2);
  transform-origin:top left;
  z-index:0;
}
.childA:hover .childB {
  transform: scale(0.5);
  transform-origin:top left;
}
.childB {
  border: solid 1px;
  color:white;
  padding: 1rem;
  background: red;
  position:absolute;
  left:100%;
  top:0;
  bottom:0;
  white-space:nowrap;

}
<div class='parent'>
  <div class='leftDiv'>I will just stay here</div>
 <div class='childA'>Child A scales
   <div class='childB'>I want to move when scaled</div>
 </div>
</div>
1 голос
/ 24 октября 2019 

.parent{
  display:flex;
}
.childA{
  padding: 1rem;
  width: 20rem;
  background: lightblue;
}
.childA:hover {
  transform: scale(5);
  transform-origin:top left;
  z-index:0;
}

.childA:hover + .childB {
  transform: translateX(calc(22rem * 4));
}
.childB {
  border: solid 1px;
  color:white;
  padding: 1rem;
  background: red;
  z-index:1
}
<div class='parent'>
   <div class='childA'>Child A scales</div>
   <div class='childB'>I want to move when scaled</div>
</div>

Я не уверен, насколько сильно вы хотите его переместить или куда. Вот код, который заставляет его двигаться при наведении вашего масштабаэлемент. Я использую смежный CSS комбинатор, чтобы это произошло. Когда вы наводите курсор на ChildA, соседнему ChildB может быть задан набор свойств.

Что касается того, почему вы должны были поместить z-index в .childB, было потому, что преобразования создают новый контекст стека. Даже если .childA предшествует .childB в вашем HTML, преобразование, по сути, переносит .childA на новый уровень. Следовательно, вы должны установить z-индекс .childB.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Вот некоторые сведения о контексте стека. Очень важно понимать, как они работают и что создает новые.

edit Вы можете рассчитать перевод на основе элемента, который вы зависли, и он будет последовательно перемещаться. Я добавил 2rem к ширине, потому что у вас есть 1rem отступа с обеих сторон. 22rem * 4 вместо 5, потому что масштаб (1) = 22rem.

0 голосов
/ 24 октября 2019

Преобразование влияет как абсолютное положение, поэтому вы увеличиваете ширину, а с помощью метода calc вы можете установить, сколько раз оно увеличивается; 

.parent{
  display:flex;
}
.childA{
  padding: 1rem;
  width: 20rem;
  background: lightblue;
}
.childA:hover {
  width: calc(20rem * 5);/*here you can change 5*/
  transform-origin:top left;
}
.childB {
  border: solid 1px;
  color:white;
  padding: 1rem;
  background: red;
}
<div class='parent'>
 <div class='childA'>Child A scales</div>
 <div class='childB'>I want to move when scaled</div>
</div>
...