3d 旋转过渡在 Internet Explorer 中的旋转方式不同

Question

我制作了一个箭头，使用盒子的两个边框并旋转盒子。单击它时，箭头应指向上方而不是下方，并使用过渡。

在 Chrome/Safari/Firefox 中可以正常工作。然而，在 IE11 中，它会奇怪地旋转。它以正确的方向结束，但到达那里 differently/around 与其他浏览器不同的轴。

button:after {
  /* make a box with two borders */
  content: "";
  border-left: 1.5px solid blue;
  border-top: 1.5px solid blue;
  transition: all 1s;
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-left: 0.5rem;
  /* rotate to give illusion of arrows */
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform-origin: 25% 25%;
  -webkit-transform-origin: 25% 25%;
}
/* change direction of arrow */
button.open:after {
  transform: rotateX(180deg) rotateZ(-135deg);
  -webkit-transform: rotateX(180deg) rotateZ(-135deg);
}

互动范例，点击按钮： https://jsfiddle.net/b51sctnu/1/

Answer 1

一般来说，让浏览器理解容易的更改是个好主意

在您的情况下，使用 2 个最相似的转换。

因为最后一步是

  transform: rotateX(180deg) rotateZ(-135deg);

在初始步骤中使用：

  transform: rotateX(0deg) rotateZ(-135deg);

0deg 旋转似乎没用，但匹配最终变换

例如，将新状态更改为悬停状态，以便更轻松地来回移动

button:after {
  content: "";
  border-left: 1.5px solid blue;
  border-top: 1.5px solid blue;
  transition: all 1s;
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-left: 0.5rem;
  -webkit-transform-origin: 25% 25%;
  -webkit-transform: rotate(-135deg);
  transform-origin: 25% 25%;
  transform: rotateX(0deg) rotateZ(-135deg);
} 
button:hover:after {
  -webkit-transform: rotateX(180deg) rotateZ(-135deg);
  transform: rotateX(180deg) rotateZ(-135deg);
}
button {
  border: 0px;
  background: grey;
  padding: 20px;
}

<button>asdasd</button>

3d 旋转过渡在 Internet Explorer 中的旋转方式不同

Transition with 3d rotation spins differently in Internet Explorer

css

css-transitions

css-transforms