CSS3 matrix3d Rechteck-Trapez-Transformation
Ich versuche, die Unterstützung von webkit für CSS3 transform: matrix3d(<matrix>) zu verwenden, um einen "fallenden Karteneffekt" zu erzeugen. (Das einzige Ziel für die Ausgabe davon ist Chrome)
Der End-Effekt sollte die folgenden 4 Stufen durchlaufen und als nur eine horizontale Linie enden:
Hier ist das CSS, das ich jetzt habe:
%Vor%Und das HTML ist zum Testen einfach:
%Vor%Die matrix3d in obigem basiert auf dem Lesen von diese SO-Frage , aber es erzeugt ein schrumpfendes Quadrat, das sich um die x-Achse dreht, die am unteren Rand der ursprünglichen Box definiert ist.
Ich verstehe, dass die CSS 2d-Matrix Rechtecke und Parallelogramme nur durch Transformation einer Box erzeugen kann und dass irreguläre Formen die matrix3d-Transformation benötigen ( dies war hilfreich bei der Auffrischung meiner verblassenden linearen Algebra!), Aber ich scheine nur in der Lage zu sein, Rechtecke und Parallelogramme zu erzeugen.
Ich habe mir einige der SO-Fragen angesehen, die mit matrix und transformation markiert wurden. Die meisten von ihnen sind nicht CSS-basiert und ich war nicht in der Lage, die Transformation, die ich will, zu bekommen.
3 Antworten
-webkit-perspective funktioniert in Chrome noch nicht (nur Safari), also wird das nicht funktionieren (versuchen Sie Ihren Code in Safari). Auch 3D-Transformationen in Chrome sind im Allgemeinen ein wenig zweifelhaft und kombinieren sich zum Beispiel nicht gut mit Farbverläufen.
Auch rotate3d (1, 0, 0, 90deg) funktioniert genauso gut wie eine Matrix, um das zu erreichen, was Sie tun. Die Matrix-Notation ist nur ein kurzer Weg, um 3D-Rotation, Skew, Bewegung und Ursprung in einem einzigen Array zu kombinieren. Da Sie sich nur um die x-Achse drehen, müssen Sie nicht auf diese Längen gehen.
%Vor%Ist genau das, was Sie brauchen.
Aktualisierung: Hier ist ein Link zu einem jsfiddle mit genau was du suchst, das sowohl in Chrome als auch in Chrome funktioniert Safari. Beachten Sie, dass es wichtig ist, anzugeben, dass der Transformationsursprung für die Spiegelung dem Ursprung der Perspektive entspricht. Der Ursprung der Webkit-Perspektive gibt an, wo sich die "Kamera" im 3D-Raum befindet, im Vergleich zu 3D-Transformationen, und es ist leicht, nicht intuitive Ergebnisse zu erzielen, wenn Sie nicht vorsichtig sind.
2. Aktualisierung: Perspective wird jetzt in allen Edge-Browsern unterstützt (obwohl das Anti-Aliasing von Firefox wenig zu empfehlen ist und -moz offensichtlich benötigt)
3. Aktualisierung: Die Geige für Cross-Browser für Firefox, IE und ohne Präfix aktualisiert.
Ich habe die CSS-Übergangsspezifikation gelesen, als ich bemerkte, dass die Rahmenbreite animierbar ist , und Sie können Trapeze mit Randbreiten vortäuschen. Das bedeutet, dass Sie fallende Karten in Chrome, Opera und FF4 fälschen können!
%Vor%Natürlich hat dies große Vorbehalte: In Ihrem Beispiel fällt die Karte nach vorne, ich habe es versucht, aber es scheint, dass dies mit dieser Technik nicht möglich ist. Jeder Inhalt innerhalb der Form wird nicht umgewandelt, es ist nur die Kartenform. Oh, und die Kartenform darf keine Grenzen haben. Hauptnachteile, die seine reale Anwendung begrenzen.
Trotzdem, es ist ziemlich cool! Spielen Sie mit ihm hier: Ссылка