rotateY() vs Matrix3d Übergänge in Edge

Ich habe ein seltsames Problem mit der Art, wie Edge (und IE 11) meine matrix3d-Transformation behandelt. Die Seite, an der ich gerade arbeite, hat Elemente, auf die bereits eine beliebige Transformation angewendet wurde (aufgrund eines Plugins), aber dank meines Managers muss ich jetzt eine 180-Grad-Drehung um die Y-Achse anwenden. Aus diesem Grund konnte ich nicht einfach die Funktion rotateY() verwenden, da sie die alte Transformation ersetzt und das Element verschoben hat. Daher dachte ich, dass ich Matrizen verwenden müsste. Dies funktioniert in Chrome und Firefox gut, aber Edge scheint matrix3d nicht auf die gleiche Weise zu behandeln.rotateY() vs Matrix3d Übergänge in Edge

Hier ist ein Beispiel für die Verwendung 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); 
}

Wenn Sie das Element der Maus über, es um die Achse Y dreht sich in 3D-Raum. Und hier ist ein Beispiel matrix3d zu verwenden, die gleiche Matrix in der "berechnete CSS" Tab in Rand dargestellt werden: 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); 
}

Dies, scheint jedoch um mehr als eine Achse zu drehen. Dies tritt nicht in Firefox oder Chrome auf. Soll ich ein magisches, herstellerspezifisches CSS verwenden? Ich war nicht erfolgreich bei der Suche nach SO oder Google, also hoffe ich, dass jemand Einblick hat!

Vielen Dank im Voraus.

Quelle

2016-03-29 Sin

Matrizen sind sehr gut für die Infinitesimalrechnung und für die universelle Einstellung der Transformationen. Aber sind nicht so gut, wenn Sie von einem Zustand zum anderen übergehen.

eine einfache Animation als

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

ist unmöglich, mit Matrizen

auch einstellen, berücksichtigen, dass auch mit Matrizen, können Sie sie mit anderen Transformationen Kette können.

Alles, was gesagt, lassen Sie uns ein Beispiel für Ihre Rotation sehen arbeitet an einem zuvor transformierte Element

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

Quelle

2016-03-30 17:54:29 vals

rotateY() vs Matrix3d ​​Übergänge in Edge

Antwort

Verwandte Themen

rotateY() vs Matrix3d Übergänge in Edge