Spójne pochodzenie w rotacji CSS między IE8 a wszystkim innym?
Możliwe jest uzyskanie obrotu tekstu w różnych przeglądarkach w CSS przy użyciu odmiantransform:rotate(XXdeg); dla zwykłych przeglądarek (w tym IE9 +, z użyciem-moz-, -webkit-, -ms- prefiksy, aby objąć starsze wersje). Następnie, w przypadku IE8 i co (powinny działać w IE6 +, chociaż IE6 i IE7 nie są już prawie obawy: IE8 jest nadal problemem), użycie transformacji macierzowych w ten sposób:
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=[ COSINE OF ANGLE ],
M12=[ SINE OF ANGLE ],
M21=[ -1 x SINE OF ANGLE ],
M22=[ COSINE OF ANGLE ],
sizingMethod='auto expand);
...na przykład.filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.76604444, M12=0.64278761, M21=-0.64278761, M22=0.76604444,sizingMethod='auto expand');
Problemem jest, te dwie metody mają różne początki transformacji, co oznacza, że chociaż będą miały te same kąty, położenie obróconego elementu różni się w zależności od przeglądarki, a to, jak się zmienia, zależy od kąta i rozmiaru elementu, dzięki czemu ustalenie go z pozycjonowaniem nie jest proste zadanie.
Oto demo ilustrujące to:http://jsbin.com/edudof/2/
W wersji innej niż IE8 można ustawić początek transformacji w ten sposób -transform-origin: 50% 50%; (określa domyślne). Nie mogę znaleźć żadnego odpowiednika z transformacją macierzy filtrów IE8 i próbowałem ustawić pochodzenie nie-IE tak, aby pasowało do początku IE (które przeczytałem - chociaż na losowych artykułach blogu - najwyraźniej znajduje się w lewym górnym rogu element, aletransform-origin: top left; jest daleko).
Nie przejmuję się tym, czym jest pochodzenie transformacji (chociaż uzyskanie wszystkiego do 50% 50% byłoby idealne). Priorytet ma spójny wynik we wszystkich przeglądarkach.
Dwie kolejne rzeczy, które znalazłem i próbowałem:
Bardzo długi artykuł opisujący teoretyczne (niesprawdzone?) Podejście, które można wykorzystać do kodowania czegoś, co robi to w Javascript. Wymaga ręcznego pozycjonowania oraz dwóch dodatkowych warstw manipulacji matrycą.https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ieBiblioteka javascriptcss3 Papier ścierny. Ma 3 zależności i we wszystkich moich testach - w tym po prostu uruchamia dołączone pliki testowe - nie zmienia niczego (bez błędów, po prostu nic nie robi)