如何修复宽度、高度和变换的 ios 过渡？答案

【问题标题】：How can I fix ios transition for width, height and transform?如何修复宽度、高度和变换的 ios 过渡？
【发布时间】：2019-08-25 10:20:38
【问题描述】：

在 ios（safari 和 chrome）上，如果我更改元素大小（宽度、高度）并旋转它，则转换所有这些属性不会按预期工作。

我尝试过使用 scale 并解决了问题，但是使用 scale 会影响孩子的大小，所以它不是最佳解决方案。

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

【问题讨论】：

【解决方案1】：

尝试添加这个可能：

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

【讨论】：

【解决方案2】：

最后，在我纠结了 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

如果元素的父元素小于子元素，我将使用边距将我的子元素定位到中心。例如：

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

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

【讨论】：