Hallo an alle.
Heute werden wir kurz über Transformationen sprechen.
Transformationen sind den Übergängen sehr ähnlich, da sie eine weitere
Möglichkeit bieten, das Erscheinungsbild von Elementen auf unserer Seite zu ändern.
So können wir die Dinge sowohl in der zweidimensionalen als auch in
einer dreidimensionalen Art und Weise ändern, während die Menschen auf Ihren Standort schauen.
Schauen wir uns also einige der zweidimensionalen Transformationsoptionen an.
Wir werden über Übersetzen, Drehen, Skalieren,
Schrägen und Matrix sprechen, und wie jeder von ihnen in Ihrem CSS3 funktionieren kann.
Die erste Option, die ich Ihnen zeigen werde, ist übersetzen.
Was übersetzt wird, ist, dass Sie ihm zwei Werte geben können, ich habe sie x und
y genannt und abhängig von diesen Werten
können Sie das Element nach links und rechts oder nach oben und unten verschieben.
Wenn x positiv ist,
bewegen Sie sich nach rechts, wenn es negativ ist, bewegen Sie sich nach links.
Mit y, wenn es positiv ist, bewegen Sie sich nach unten und wenn es negativ ist, bewegen Sie sich nach oben.
Schauen wir uns also ein tatsächliches Beispiel an, um es ein wenig klarer zu machen.
Hier, ich habe dieses schöne blaue Element.
Und was ich sagen werde, ist, dass ich es übersetzen will, 100 und 75.
Sie werden also erwarten, dass es nach rechts und nach unten ein wenig bewegt wird.
So können Sie wieder sehen, es ist schwer, wirklich zu sagen, wann die Dinge nach oben und unten gehen.
Aber wenn man sich die Margen anschaut, haben wir die Margen fast effektiv erhöht.
Die nächste Option ist „Drehen“.
Wenn Sie etwas drehen, drehen Sie sich, oder
ich mag es, dass es das Element dreht, eine bestimmte Anzahl von Grad.
Du siehst den Spin nicht.
Sie sehen nur das Ergebnis oder wie es am Ende aussehen würde.
Also hier habe ich ein anderes Element und ich werde es um 30 Grad drehen.
Also von hier, bis hier.
Jetzt ist es wirklich wichtig, dass denken Sie daran, das Grad zu setzen.
Wenn Sie nur 30 setzen, werden viele der Browser diese Arbeit nicht haben.
In der Tat, die meisten von ihnen werden es nicht.
Stellen Sie also sicher, dass Sie ihm die Grade geben, die Sie drehen möchten, eine Art Zahl, 30,
90, 80, und verwenden Sie dann Grad.
Als nächstes reden wir über Skala.
Und Skala ist nur eine ausgefallene Art zu sagen, lasst uns es breiter oder größer machen.
Also nochmal, Sie geben ihm zwei Zahlen, und
das ist, wie viel Sie die Breite und die Höhe eines Elements ändern möchten.
Also hier habe ich einen kleineren Block, und
ich habe beschlossen, dass ich es gerne zweimal so breit und dreimal so hoch machen würde.
Hier ist ein neues Element nach der Transformationsskala.
Skew ist sehr schwer für mich zu erklären, was es tut, und es ist noch schwieriger,
es zu tun, weil ich immer meine Linke und Rechte vergesse, wenn ich auf die Kamera schaue.
Also, wieder, werden Sie wollen, um mit diesem spielen und
sehen Sie sich einige der Beispiele.
Was Sie tun, ist, dass Sie das Element um eine bestimmte Anzahl von Grad um
den x-Winkel und eine bestimmte Anzahl von Grad um den y-Winkel drehen.
Also hier werde ich Ihnen eine Schrägstellung zeigen, 30 Grad mal 15 Grad.
Du fängst hier an und du bist irgendwie in einem sehr seltsamen Winkel gedreht.
Und wieder ist es sehr schwer, Ihnen das zu zeigen, wenn ich auf den Bildschirm starre, also
hoffe ich, dass Sie das eingeben und irgendwie ein bisschen damit spielen.
Die nächste und letzte Option ist Matrix.
Und wenn Sie die Matrix verwenden,
können Sie alle 2D-Transformationsmethoden zu einem Befehl gleichzeitig kombinieren.
Ich benutze das nie, weil ich es viel zu verwirrend finde, sich daran zu erinnern
, welche Skala, welche man dreht, welche schief ist.
Wenn Sie sich also nicht wirklich sicher mit Ihrem CSS3 fühlen, würde ich vermeiden, Matrix zu
verwenden und jede der anderen einzelnen Transformationen nacheinander verwenden.
Die anderen, von denen wir gerade gesprochen haben, waren zweidimensionale Transformationen.
Wir können auch dreidimensionale Transformationen durchführen, und
sie sind denen sehr ähnlich, über die wir gerade gesprochen haben.
So zum Beispiel mit Rotation, jetzt statt nur entlang der X- oder
Y-Achse zu drehen, können wir auch um die Z-Dimension drehen.
Also, wenn Sie eine 3D-Drehung verwenden wollten, sind Ihre Optionen jetzt transform:Rotatey
wie viele Grad, RotateX, Rotatez,
oder Sie können tatsächlich Rotate3d sagen und ihm Zahlen entlang jeder einzelnen Dimension geben.
Ich benutze selten die 3D-Dimensionen.
Aber wir haben die Möglichkeiten.
Wir haben die Drehung, wir haben die Skala, und wir haben die Übersetzung.
Und sie können wirklich einige wirklich interessante Dinge damit machen, wie Sie möchten, dass Ihre
Elemente aussehen.
Wenn es an der Zeit ist, Transformationen zu verwenden, gibt es ein paar Dinge, über die man nachdenken muss.
Wenn Sie Transformationen verwenden, verwenden Sie sie in der Regel mit Statusänderungen.
Wenn Sie sich erinnern, bedeutet das, dass Sie möglicherweise eine Transformation durchführen, wenn Sie einen On
Hover, einen On Focus oder ein On aktiv machen.
Wenn Sie wirklich nur versuchen, zu ändern, wie ein Element von
Anfang an aussieht und es so belassen, möchten Sie vielleicht darüber nachdenken, nur Bilder zu machen
und mit den Bildern zu vermasseln und Dinge offline zu machen.
Es ist schneller und es verbraucht nicht so viel Bandbreite.
Es ist jedoch eine coole Möglichkeit, irgendwie mit Dingen zu spielen und
Vertrauen mit Ihrem CSS zu gewinnen.
Natürlich ist es bei so vielen Dingen, die wir in dieser Klasse gelernt haben, wichtig,
daran zu denken, dass Sie oft Browser-Präfixe benötigen, um Transformationen zum Laufen zu bringen.
Also ein weiteres Werkzeug in Ihrem Werkzeuggürtel,
um zu lernen, wie man etwas Spannendes mit Ihrer Seite macht.
Ich weiß, dass ich hier nicht mein normales Beispiel gemacht habe, aber
das nächste Video zeigt ein Beispiel mit Übergängen, Transformationen und
einigen der anderen Dinge, die wir die ganze Zeit gelernt haben.
Ich hoffe, Sie sehen es sich an und
fühlen sich ein wenig selbstbewusster darüber, was wir gerade mit Transformationen gelernt haben.
Viel Glück.