rotateY() vs Matrix3d geçişleri Edge içinde

Kenar (ve IE 11) matris3d dönüşümü işleme biçimiyle garip bir sorunla karşılaştım. Üzerinde çalıştığım sayfanın kendilerine uygulanmış keyfi bir dönüşümü olan elemanlar var (bir eklentinin kullanılmasından dolayı), ancak yöneticim sayesinde şimdi Y ekseni etrafında 180 derecelik bir dönüş uygulamak zorundayım. Bu nedenle, rotateY() işlevini eski dönüşümü değiştirip, öğeyi taşıdığı için kullanamamıştım, bu yüzden matrisleri kullanmam gerektiğini düşündüm. Bu, Chrome ve Firefox'ta iyi çalışıyor ancak Edge, matrix3d'yi aynı şekilde ele almıyor. İşte rotateY() vs Matrix3d geçişleri Edge içinde

rotateY kullanmanın bir örnek: 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); 
}

sen elemanı üzerine, Y ekseni etrafında döner fare 3 boyutlu alan Ve burada Edge "bilgisayarlı CSS" sekmesinde gösterilen aynı matrisi kullanılarak Matrix3D kullanarak bir örnek: 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); 
}

Bu, Ancak, birden fazla eksenin etrafında dönüyor gibi görünüyor. Bu Firefox veya Chrome'da oluşmaz. Bazı büyülü satıcılara özgü CSS kullanmalı mıyım? SO ya da Google’ı aramada başarısız oldum, bu yüzden birilerinin içgörüsü olduğunu umuyorum!

Şimdiden teşekkürler.

kaynak

2016-03-29 Sin

Matrisler, kalkülüs için ve dönüştürmeleri evrensel bir şekilde ayarlamak için çok iyidir. Ama bir eyaletten diğerine geçerken o kadar iyi değil.

basit animasyon

olarak

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

bile kullanarak matrisler, başkalarının dönüşümler ile zincirleyin ki dikkate almak, aynı zamanda matrisleri

ile ayarlamak mümkün değildir.

en önceden dönüştürülmüş eleman

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

çalışan rotasyonunuza bir örneğini görelim, Bütün bu dedi

kaynak

2016-03-30 17:54:29 vals

rotateY() vs Matrix3d ​​geçişleri Edge içinde

cevap

İlgili konular

rotateY() vs Matrix3d geçişleri Edge içinde