Direkte lineare Transformation in CSS
Ist es möglich, einen DLT in CSS zu machen? Wenn ja, wie wird dies erreicht? Ich kann mir keinen Weg vorstellen mit transform: matrix ... Wenn das nicht möglich ist, was wäre ein alternativer Ansatz?
Der besondere Effekt, den ich erreichen möchte, ist divs ähnlich wie bei Safari zu gestalten: 
1 Antwort
Hier ist eine sehr grobe und nicht-generische Antwort auf Ihre Anfrage. Ссылка Sie können es leicht erweitern, um eine generische Lösung zu erhalten.
in meinem CSS,
%Vor% Die Grundidee besteht darin, für jede Spalte einen Stil zu erstellen (hier rufe ich die IDs auf, aber es wäre besser, für jede Spalte einen Stil zu haben und die Spalten als .left , .middle ,% zu definieren co_de%, usw.)
Ich werde meinen Beitrag heute Nacht aktualisieren, wenn ich Zeit habe, in die Details zu gehen:)
EDIT: als Versprechen, hier ist eine etwas bessere Version. Jetzt ist es viel allgemeiner und abhängig von der Größe Ihres Fensters erhalten Sie die richtige Anzahl an Cubes. Es ist noch lange nicht perfekt (man könnte mit der Größe der Würfel spielen, um ein besseres Tiefengefühl zu bekommen), aber im Allgemeinen sieht man, dass es möglich ist, sogar dynamisch :) Hier ist die Geige: Ссылка
Um ein wenig in die Details des Javascript zu gehen:
%Vor% Die Funktion .right ist eine einfache Funktion, die die Quadrate auf Ihrer Webseite mit gleichen Rändern (oben, links, rechts, unten) verteilt. Ich nahm es von 1 .
Die Funktion dispatch berechnet die Anzahl der Spalten und definiert den Rotationsbetrag für jede Spalte (in meinem Beispiel ist der maximale Rotationswert 40). Der Rest des Codes sind reine mathematische Tests, damit es richtig funktioniert.
Um ein besseres Ergebnis zu erhalten, sollten Sie mit der Größe jedes Quadrats spielen, aber seien Sie vorsichtig, weil die dlt -Funktion auch die Größe des Quadrats kennen muss, um zu berechnen, wie viele Quadrate angezeigt werden dürfen pro Zeile. Ich werde dich Spaß damit haben lassen;)
Tags und Links css css-transforms