CSS3D-Matrixgenerierung
Ich versuche, folgenden Effekt mit css3 und Javascript zu erreichen, wenn wir die Maus zum center div bewegen (MouseOver-Effekt)
Ich habe eine kleine Bibliothek erstellt, die 3 Argumente Element, sourcePoints, Zielpunkte akzeptiert und css3D Matrix und update Element zurückgibt. Hier ist mein JavaScript-Code.
%Vor%UPDATE: Hier ist JSFiddle
Ich rufe die TransformElement-Methode für jedes der 9 Divs mit den richtigen Quell- und Zielkoordinaten auf. Aber es funktioniert nicht wie erwartet. Bitte schlagen Sie die mögliche Lösung vor. Können wir es trotzdem mit three.js machen (nur fragend ist vielleicht seine dumme Idee)?
UPDATE: Können wir es mit CSS3D Renderer und Three.js machen.
Idee ist, Ebene zu erstellen und es in 3x3 Gitter zu schneiden und auf der Maus über jeder Fläche der Ebene können wir dieses div nach oben skalieren und respectivly müssen wir andere div nach aktuellen div skalieren? Ist es möglich?
1 Antwort
Ich habe nicht versucht, Ihre Bibliothek zu benutzen, aber hier ist meine Lösung für Ihr Problem: Ссылка (Ich habe es benutzt Haml und SCSS, können Sie kompilierten Code sehen, indem Sie auf das kleine Auge in der oberen rechten Ecke jedes Panels klicken)
Ich habe diesen Artikel verwendet, um diesen Code zu schreiben.
9 Matrizen werden zuerst berechnet (entsprechend der schwebenden Kachel und allen umgebenden), wobei numericjs und fomulas verwendet werden, die für den zuvor verlinkten Artikel verfügbar sind. Dann werden diese Matrizen beim Mouseover auf die entsprechenden Kacheln angewendet. Hier ist der Code, um die Transformationsmatrix zu erhalten, die die Positionen von 4 Punkten vor und nach der Transformation kennt:
%Vor%Beachten Sie, dass, wie in meinem Code erwähnt, wenn Sie Übergänge animieren möchten, Sie nicht einfach CSS verwenden können (da es nur jede Matrixnummer umwandelt, aber dies würde selten ein passendes Ergebnis ergeben). Sie könnten versuchen, es mit Javascript zu tun, aber es könnte ein bisschen langsam sein (ich habe es nicht getestet), weil Sie Matrizen nicht zwischenspeichern konnten und sie bei jedem Frame berechnen müssten.
Tags und Links javascript html html5 css3 three.js