Transformacja CSS3: obracanie; w IE9

Mam element, który musi być pionowy w projekcie, który zrobiłem. Mam css do tego do pracy we wszystkich przeglądarkach oprócz IE9. Użyłem filtr dla IE7 & IE8:Transformacja CSS3: obracanie; w IE9

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Wydaje się to jednak uczynić mój żywioł przejrzyste IE9 a CSS3 „tranform” porperty wydaje się nie robić nic!

Czy ktokolwiek wie o obracających się elementach w IE9?

Naprawdę doceniam pomoc!

Źródło

2011-02-01 wilsonpage

134

standard CSS3 obracania powinien pracować w IE9, ale wierzę, że trzeba dać mu prefiks dostawcy, tak jak poniżej:

-ms-transform: rotate(10deg);

Jest możliwe, że nie może pracować w wersja beta; jeśli nie, spróbuj pobrać aktualną wersję podglądu (podgląd 7), która jest późniejszą wersją niż wersja beta. Nie mam wersji beta do przetestowania, więc nie mogę potwierdzić, czy była w tej wersji, czy nie. Ostateczna wersja jest zdecydowanie planowana, aby ją wspierać.

Mogę również potwierdzić, że specyficzna dla IE właściwość filter została usunięta w IE9.

[Edytuj]
Ludzie poprosili o dodatkową dokumentację. Jak mówią, jest to dość ograniczone, ale znalazłem tę stronę: http://css3please.com/, która jest przydatna do testowania różnych funkcji CSS3 we wszystkich przeglądarkach.

Ale testowanie funkcji obracania na tej stronie w podglądzie IE9 spowodowało dość spektakularne awarie.

Jednak zrobiłem kilka niezależnych testów używając -ms-transform:rotate() w IE9 na moich własnych stronach testowych i działa dobrze. Wnioskuję więc, że funkcja jest zaimplementowana, ale ma pewne błędy, prawdopodobnie związane z jej dynamicznym ustawianiem.

Innym przydatnym punktem odniesienia dla których funkcje są realizowane w jakich przeglądarek jest www.canIuse.com - patrz http://caniuse.com/#search=rotation

[EDIT]
Ożywienie tę starą odpowiedź, bo niedawno dowiedział się o hack który nazywa CSS Sandpaper jest istotna dla pytania i może ułatwić sprawę.

Hack implementuje obsługę standardowego CSS transform dla starszych wersji IE. Więc teraz można dodać następujące do CSS:

-sand-transform: rotate(10deg);

... i mają działać w IE 6/7/8, bez konieczności korzystania z składni filter. (oczywiście nadal używa składni filtru za kulisami, ale to znacznie ułatwia zarządzanie, ponieważ używa podobnej składni do innych przeglądarek)

Źródło

2011-02-01 16:38:36 Spudley

Dzięki Spud! Sprawdzę to teraz i wrócę do ciebie. Nie mogłem uwierzyć, jak mało dokumentacji o tym online. – wilsonpage

@Spudley Czy mógłbyś opublikować źródło? Nie mogę tego znaleźć w witrynie MSDN http://msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx –

@ Šime Vidas i @pagewil - masz rację, niewiele dokumentacja wokół. Znalazłem to udokumentowane tutaj: http://css3please.com/, choć powinienem zauważyć, że ta strona rozbił moją kopię podglądu IE9, gdy próbowałem użyć właściwości rotate. Jednak moje własne niezależne testy potwierdziły, że właściwość działa, z prefiksem dostawcy, tak jak zacytowałem w mojej odpowiedzi. (biorąc pod uwagę awarię, wydaje mi się, że nadal są w nim błędy!) – Spudley

Miałem również problemy z transformacjami w IE9, użyłem -ms-transform: rotate(10deg) i to nie było nie działa. Próbowałem wszystkiego, co mogłem, ale problem był w trybie przeglądarki, aby transformacje działały, musisz ustawić tryb kompatybilności na "Standard IE9".

Źródło

2012-06-11 10:58:57

naciśnij f12 w ie i wybierz opcję zmiany przeglądarki na ie-9, a następnie sprawdź, czy to zadziała ... –

Aby IE9 działał z pionowym tekstem, musisz wyłączyć tryb dziwactwa, używając następujących dwóch pierwszych linii twojego pliku: '' ' ' – GlenPeterson

Każdy prawidłowy typ dokumentu powinien wyłączyć tryb dziwactwa, np .: . Tryb przeglądarki powinien być domyślnie IE9, chyba że zmieniłeś ustawienia. – superluminary

Spróbuj

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { 
    margin-left: 50px; 
    margin-top: 50px; 
    margin-right: 50px; 
    margin-bottom: 50px; 
} 
.rotate { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    -webkit-transform: rotate(-10deg); 
    -moz-transform: rotate(-10deg); 
    -o-transform: rotate(-10deg); 
    -ms-transform: rotate(-10deg); 
    -sand-transform: rotate(10deg); 
    display: block; 
    position: fixed; 
} 
</style> 
</head> 

<body> 
<div class="rotate">Alpesh</div> 
</body> 
</html>

Źródło

2013-04-01 05:06:28

Próbuję tego kodu z ie9, FireFox, Chrome, Safari i jego pracą –

wiem, że to jest stary, ale miałem ten sam problem, uznał ten post, a jednocześnie nie wyjaśnił dokładnie, co się stało, to pomogło mi właściwą odpowiedź - mam nadzieję, że moja odpowiedź pomoże komuś, kto może mieć podobny problem do mojego.

Miałem element, który chciałem obrócić pionowo, więc naturalnie dodałem filtr: dla IE8, a następnie dla właściwości -ms-transform dla IE9. Odkryłem, że posiadanie właściwości -ms-transform AND filtr zastosowany do tego samego elementu powoduje, że IE9 renderuje element bardzo słabo. Moje rozwiązanie:

Jeśli używasz właściwość przekształcić początkowego, dodać jeden dla MS zbyt (-ms-transform-origin: lewy dolny). Jeśli nie widzisz swojego elementu, może się okazać, że obraca się wokół środkowej osi, a tym samym opuszcza stronę - więc sprawdź to.
Przenieś filtr: własność dla IE7 & 8 do osobnego arkusza stylów i używać IE warunkowy, aby wstawić ten arkusz stylów dla przeglądarek mniej niż IE9. W ten sposób nie wpływa to na style IE9 i wszystko powinno działać dobrze.
Należy również użyć poprawnego znacznika DOCTYPE; jeśli się pomylisz, IE9 nie będzie działać poprawnie.

Źródło

2014-09-02 19:42:59 Steve

Dobre wywołanie na '-ms-transform-origin'; przez chwilę miałem drapanie w głowę. – danwild

Transformacja CSS3: obracanie; w IE9

Odpowiedz

Powiązane problemy