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

Question

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

我试过使用缩放，它解决了问题，但是使用缩放会影响 children 的大小，所以它不是最佳解决方案。

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

Answer 1

也许可以尝试添加：

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

Answer 2

终于，在为此苦思冥想 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);
}

How can I fix ios transition for width, height and transform?