Блог

На ios (safari и Chrome), если я изменяю размер элемента (ширина, высота), а также поворачиваю его, переход всех этих свойств не работает должным образом.

Я пробовал использовать scale, и это решает проблему, но использование scale влияет на размер дочерних элементов, поэтому это не оптимальное решение.

 transform: translate3d(-50%, -50%, 0) rotate(-13deg) scale(1);
transform-origin: center;
transition: all .3s ease-out;
  

Это неправильное поведение:https://imgur.com/a/K6KOXSj
Здесь у меня есть ручка с кодом:https://codepen.io/alexcondur/pen/pBjOWM?editors=0100

Попробуйте добавить это, возможно:

 transform-origin: center center;  /* center twice */
transform-box: fill-box;
  

Наконец, после того, как я обдумывал это в течение 2 дней, я нашел решение.

Идея состоит в том, чтобы центрировать элемент без использования translate3d(-50%, -50%, 0);
и только сохраняя rotate преобразование. Итак, я использую flex (я думаю, что grid тоже подойдет)

 .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.child {
  transform: rotate(14deg);
}
  

https://codepen.io/alexcondur/pen/ROaVMe

Если родительский элемент будет меньше дочерних элементов, я бы использовал margin для позиционирования моего дочернего элемента по центру. Например:

 .parent {
  width: 100px;
  height: 100px;
}

.child {
  width: 200px;
  height: 350px;
  margin: -175px 0 0 -100px;
  transform: rotate(14deg);
}