Ich habe einen jQuery-Bildscroller, der die Tiefe mit den CSS-Eigenschaften perpective und transform: translateZ simuliert. Es wird korrekt in Chrome dargestellt, aber nicht in IE10 oder Firefox.
Hier ist das vollständige Projekt (klicken Sie auf den Link "Wer kommt", um den Bildwechsler zu sehen): Ссылка und hier ist ein JsFiddle des entsprechenden Codes: Ссылка (Ich bin mir nicht sicher, warum, aber Stackoverflow sagt mir, ich muss Code enthalten, um jsFiddle zu verknüpfen, also hier ist das CSS) ...
%Vor% Beachten Sie, dass ich dies versucht habe und AND das Präfix -ms- für die Eigenschaften ausschließt. (Die aktuelle jsFiddle enthält sowohl, als auch -webkit- und -moz- ).
Wer weiß, warum dies in IE10 nicht funktioniert?
Prost.
Längeneinheit
IE und Firefox benötigen eine Längeneinheit für perspective -Werte ( px , em ).
Bei Chrome und Safari ist die Längeneinheit optional, wenn Sie das Präfix -webkit verwenden.
W3C-Standards
Es ist sicherer, allen perspective -Werten eine Längeneinheit hinzuzufügen. Es entspricht mehr dem W3C-Standard . Es ist der eine Ansatz, den alle Browser unterstützen. Und sobald Chrome und Safari perspective ohne Präfix unterstützen, ist es möglich, dass sie eine Einheit der Länge benötigen (aus Gründen der Übereinstimmung mit W3C-Standards und mit anderen Browsern).
Hinweis: Die aktuellen Informationen auf w3schools.com sind veraltet. Es gibt keine Erwähnung der Unterstützung für IE10 oder Firefox, und ihre Beispiele haben keine Längeneinheit. Die jüngeren Beispiele auf developer.mozilla.org enthalten eine Einheit der Länge, die mit der W3C-Standards.
Es funktioniert nicht, da kein WebKit Browser die Eigenschaft perspective ablegt. Diese Eigenschaft akzeptiert entweder none oder einen Längenwert. Längen erfordern eine Einheit, es sei denn, der Wert ist 0. Wenn Sie eine Einheit wie px hinzufügen, funktioniert es in IE und Firefox.
Siehe Ссылка
Ich habe die -ms-Eigenschaft entfernt, da IE10 in der endgültigen Version ohne Präfix hinzugefügt wurde. Ich habe auch die Version ohne Präfix zuletzt verschoben, so dass sie sich gegenüber den vorfixierten Versionen durchsetzt.
Ich bin nicht sicher, warum es in WebKit funktioniert. Es sollte die Eigenschaft wie Firefox und IE fallen lassen, aber ich denke, es macht Fehlerkorrektur.
Ich benutzte Matthew Wagerfields ParallaxJS und perspective: 4000px , aber es funktionierte immer noch nicht in IE10 / 11, während es war absolut in Ordnung in Chrome und Firefox.
Das Markup
%Vor% Das Definieren von perspective: 4000px für .container war für FF und Chrome in Ordnung, aber es hat erst begonnen, für IE zu arbeiten, wenn es in .layer definiert wurde. Also vielleicht nachsehen. Könnte etwas anderes mit den Myriaden von transform-style: preserve-3d || flat zu tun haben, die ich gesetzt habe, aber das Wesentliche ist: check auf welchem Selector deine Perspektive eingestellt ist.
Tags und Links internet-explorer-10 css3 transform firefox perspective