2016-04-11 9 views
1

Schnelle Frage, die für jemanden ziemlich einfach sein könnte. In meinem Website-CSS habe ich translate3d() ziemlich viel für einige nette Animationen verwendet. Die Sache ist, dass alle diese Animationen 2d sind, ich habe gerade translate3d() verwendet, um das GPU-Rendering wo anwendbar zu nutzen.css, translate() vs translate3d() Unterstützung

Mit anderen Worten, ich habe so etwas wie die folgenden benutze:

transform: translate3d(50%, 50%, 0); und Animieren es, während transform: translate(50%, 50%); die gleiche visuelle Wirkung ohne die GPU Boost erreichen würde.

Jetzt habe ich ein wenig auf CanIUse gesucht und sah, dass, wenn es um Internet Explorer (natürlich) geht es ein bisschen fehlt Unterstützung für translate3d(), Unterstützung für 2D-Transformationen sind nicht eine Tonne besser, aber zumindest gibt es mir Zugriff auf IE 9.

Also meine Frage ist dies (Ich merke, dass ich an einem Mac arbeite und kann einen Weg finden, es selbst im Moment zu testen), wenn ich translate3d() benutze , obwohl der IE diese spezifische Eigenschaft nicht unterstützt, erkennt er, dass ich nur X- und Y-Transformationen verwende und trotzdem rendere? Oder wäre es besser, alle nur auf normale alte zu wechseln?

Wie ich schon sagte, der einzige Grund, warum ich zögere ist, weil mit komplexen Animationen die GPU-Beschleunigung ist schön zu haben.

Wenn IE nicht automatisch zurückfallen wird (was ich erwarte und fürchte), könnte mir jemand andere Techniken anbieten, so dass ich GPU-Rendering in den Browsern nutzen kann, die es unterstützen, aber für IE zurückfallen?

Könnte ich einfach sowohl 2D- als auch 3D-Transformationen in meiner CSS (in dieser Reihenfolge) auflisten, so dass IE die translate3d() ignoriert, oder könnte das zusätzliche Ressourcen verbrauchen?

Vielen Dank im Voraus für jede Eingabe, es ist alles sehr geschätzt.

+0

Mögliche Duplikat [Erkennung 'verwandeln: translate3d' support] (http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support) – Vucko

+0

Danke für die Antwort, ich hatte diesen Beitrag eigentlich nicht gefunden, aber ich glaube nicht, dass es ein Duplikat ist. Meine Hauptfrage war, ob IE zurückfallen würde, da die Transformation von Natur aus 2d war, unabhängig von der dritten Variable. Aber dieser Artikel sieht ziemlich interessant aus und ich muss es noch einmal durchlesen, danke nochmal! –

Antwort

2

Sie können -ms-transform verwenden, die nur auf IE9 und transform für den anderen Browsern gelten

-ms-transform: translate(50%, 50%); /* IE9 support*/ 
transform: translate3d(50%, 50%, 0); /* IE10+ and other browser*/ 

IE9 die transform ignorieren und verwenden Sie die -ms-transform

Verwandte Themen