Question

我遇到了一个奇怪的问题，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的一个例子，使用＆＃34;计算CSS＆＃34;中显示的相同矩阵。 Edge中的标签：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时没有成功，所以我希望有人有一些见解！

提前致谢。

Answer 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>

在Edge中的rotateY（）与matrix3d转换

1 个答案: