Edge(およびIE 11)がmatrix3d変換を処理する方法に奇妙な問題があります。私が作業しているページには、(プラグインが使用されているため)既に任意の変換が適用されている要素がありますが、マネージャーのおかげでY軸の周りを180度回転させる必要があります。このため、単にrotateY()関数を古い変換に置き換えて要素を移動したので、行列を使用する必要があると考えました。これはChromeとFirefoxでは正常に動作しますが、Edgeはmatrix3dを同じように処理していないようです。rotateY()対エッジ内のmatrix3dトランジション
ここで回転Yを使用しての例です: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);
}
あなたが要素の上にマウス、それはでY軸を中心に回転すると3D空間。 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);
}
これ、:そして、ここでエッジの "計算されたCSS" タブに示されているのと同じ行列を使用して、のMatrix3Dを使用した例ですしかし、1つ以上の軸を中心に回転しているようです。これはFirefoxやChromeでは発生しません。魔法のベンダー固有のCSSを使うはずですか?私はSOやGoogleの検索に失敗してしまったので、誰かが洞察してくれることを願っています!
ありがとうございます。