Wie Verwenden von CSS3-Transformationen

CSS3 beinhaltet die Fähigkeit, in die HTML5-Web-Seite geometrische Transformationen auf jedes Element anzuwenden. Dies stellt ein bemerkenswertes Maß an visuellen Kontrolle bislang nicht zur Verfügung, um Web-Entwickler.

Das verwandeln Attribut können Sie eine mathematische Transformation zu einem anzuwenden div. Wenn Sie sich bewerben verwandeln einem Element, müssen Sie eine oder mehrere der folgenden Parameter anzuwenden, um die Art der Transformation zu beschreiben:

  • Übersetzen: Verschiebt das Objekt von seiner Ausgangsposition zurück. Übersetzung erfordert zwei Parameter, eine X-Messung und eine Y-Messung. Verwenden Sie die Standard CSS Maßeinheiten.

  • drehen: Dreht das Bild um seinen Mittelpunkt Wert. Hat den Parameter eine Winkelmessung in Grad. (Beispielsweise 30 Grad beträgt 30deg.)

  • Rahmen: Ändert die Größe des Objekts. Die Standard-Version ändert sowohl die horizontale und vertikale Größe einheitlich. Das scalex und scaley Attribute können die Skala entlang einer einzelnen Achse einzustellen verwendet werden. Maßstab ist in den Standard CSS Maßeinheiten gemessen. Wenn Maßstab größer als 1 ist, ist das Objekt größer ist als das Original. Eine Skala zwischen null und eins macht den Artikel kleiner ist als es war.

  • Schiefe: Auf diese Weise können Sie durch ein Winkel, das Element zu kippen. Der Parameter erfordert eine Winkelmessung in Grad. Das skewX und skewY Variationen ermöglichen eine vollständige Kontrolle der Transformation.

Sie können mehrere Parameter kombinieren, indem sie nach dem Attribut durch Leerzeichen getrennt verwandeln auflistet.

Zur Veranschaulichung, stellen Sie sich das folgende HTML-Schnipsel:

Box 1
 
Box 2
 
Box 3
 
Box 4
 
Box 5

Der Code zeigt fünf identische divs. Zu Darstellungszwecken ganze divs teilen sich die gleiche gemeinsame CSS:

# Box1, # box2, # box3, # box4, # box5 {width: 100px; Höhe: 80px; Grenze: 3px solide schwarz- background-color: gelb-}

Wenden Sie Variationen des Attributs zu jedem Element, um zu sehen, wie die Transformationen arbeiten.

bild0.jpg
# Box2 {verwandeln: translate (100px, 0px) -} # box3 {transform: rotate (45 Grad) -} # box4 {Transformation: Skala (2) zu übersetzen (100px, 0px) -} # box5 {Transformation: Skew (3) -}

Beachten Sie, dass Browser-Unterstützung auf diesem Element ändert. Chrome und Safari erwarten immer noch die -webkit Präfix, aber Firefox und Opera unterstützen die Version ohne Präfix. 10 IE arbeitet theoretisch mit der Standard-Version, aber Version 9 erfordert die -Frau- Präfix und früheren Versionen von IE einfach ignorieren Transformationen zusammen. Wenn Sie die tatsächliche Quellcode der transform.html Seite sehen wollen, werden Sie mehrere Versionen finden Sie in den verschiedenen Browsern zu umgehen:

 # Box2 {verwandeln: translate (100px, 0px) - Webkit-transform: translate (100px, 0px) - ms-transform: translate (100px, 0px) -}

Schließlich wird der gesunde Menschenverstand durchbrechen und herstellerspezifische Präfixe nicht mehr nötig sein, aber für den Augenblick ist es am sichersten, sie alle an Ort und Stelle zu bringen. Wenn Sie ältere Versionen von Firefox und Opera fangen wollen, können Sie auch dazu gehören (-moz-und -O-) Präfixe als auch.

Ähnliche

Menü