如何修复iOS宽度，高度和变换的过渡？

Question

在ios（野生动物园和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

Answer 1

尝试添加以下内容：

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

Answer 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

如果元素的父元素小于子元素，则可以使用margin来使子元素居中。例如：

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

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