Как я могу исправить переход ios для ширины, высоты и преобразования?
В ios (safari и chrome), если я изменяю размер элемента (ширину, высоту), а также поворачиваю его, переход всех этих свойств не работает должным образом.
Я пытался использовать масштаб, и это решает проблему, но использование масштаба влияет на размер дочерних элементов, поэтому это не оптимальное решение.
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
Ответы 2
Попробуйте добавить это, возможно:
transform-origin: center center; /* center twice */
transform-box: fill-box;
Наконец, после того, как я обмотал голову в течение 2 дней, я нашел решение.
Идея состоит в том, чтобы центрировать элемент без использования translate3d(-50%, -50%, 0);
и сохраняя только преобразование rotate.
Итак, я использую flex (думаю, сетка тоже подойдет)
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.child {
transform: rotate(14deg);
}
https://codepen.io/alexcondur/pen/ROaVMe
Если бы родительский элемент был бы меньше, чем дочерние элементы, я бы использовал отступ, чтобы расположить дочерний элемент по центру. Например:
.parent {
width: 100px;
height: 100px;
}
.child {
width: 200px;
height: 350px;
margin: -175px 0 0 -100px;
transform: rotate(14deg);
}