Edge 中的 rotateY() 与 matrix3d 转换答案

【问题标题】：rotateY() vs matrix3d transitions in EdgeEdge 中的 rotateY() 与 matrix3d 转换
【发布时间】：2016-07-16 18:20:34
【问题描述】：

Edge（和 IE 11）处理我的 matrix3d 转换的方式遇到了一个奇怪的问题。我正在处理的页面中的元素已经应用了任意变换（由于使用了插件），但是感谢我的经理，我现在需要在此之上围绕 Y 轴应用 180 度旋转。因此，我不能简单地使用 rotateY() 函数，因为它替换了旧的变换并移动了元素，所以我认为我需要使用矩阵。这在 Chrome 和 Firefox 中运行良好，但 Edge 似乎无法以相同的方式处理 matrix3d。

这里是一个使用rotateY的例子：http://codepen.io/anon/pen/wGqapy

(HTML)

<body>
<div class="flip-container">

        <div class="front">
            Test
        </div>


</div>
</body>

(CSS)

.flip-container,
.front {
  width: 320px;
  height: 480px;
}

.front {
  transition: 0.6s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: green;
}

.flip-container:hover .front
{
  transform: rotateY(180deg);
}

当您将鼠标悬停在元素上时，它会在 3D 空间中围绕 Y 轴旋转。这是一个使用 matrix3d 的示例，使用 Edge 中“计算 CSS”选项卡中显示的相同矩阵：http://codepen.io/anon/pen/QNMbmV

(HTML)

<body>
<div class="flip-container">

        <div class="front">
            Test
        </div>


</div>
</body>

(CSS)

.flip-container,
.front {
  width: 320px;
  height: 480px;
}

.front {
  transition: 0.6s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: green;
}

.flip-container:hover .front
{
  transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}

然而，这似乎围绕不止一个轴旋转。这在 Firefox 或 Chrome 中不会发生。我应该使用一些神奇的供应商特定的 CSS 吗？我一直在搜索 SO 或 Google 没有成功，所以我希望有人能有所了解！

提前致谢。

【问题讨论】：

标签： css css-transitions css-transforms microsoft-edge

【解决方案1】：

矩阵对于微积分和以通用方式设置变换非常有用。但是当您从一种状态转换到另一种状态时，效果就不那么好了。

一个简单的动画

from {transform: rotate(0deg);}     
to {transform: rotate(360deg);}

不可能用矩阵设置

另外，请注意，即使使用矩阵，您也可以将它们与其他变换链接起来。

说了这么多，让我们看一个旋转的示例，说明您在之前转换过的元素上工作

.flip-container,

.front {
  width: 320px;
  height: 480px;
}

.front {
  transition: 0.6s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: green;
  /* transform: rotate(10deg); is equivalent to matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0) */
  transform: matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0) rotateY(0deg);
}

.flip-container:hover .front {
  transform: matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0) rotateY(180deg);
}

<div class="flip-container">
  <div class="front">
    Test
  </div>
</div>

【讨论】：