2016-03-29 7 views
0

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の検索に失敗してしまったので、誰かが洞察してくれることを願っています!

ありがとうございます。

答えて

0

マトリックスは計算に非常に適しており、普遍的な方法で変換を設定します。しかし、あなたがある州から他の州に移行しているときにはあまり良くありません。

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>

に取り組んであなたの回転の例を見てみましょう、と述べているすべての
関連する問題