So erstellen Sie Transformationen mit CSS 3

CSS 3 können Sie viele coole Effekte auf Ihre Website für die Anzeige auf dem iPhone und iPad erstellen. Die CSS-3-Transformation Eigenschaften ermöglichen es Ihnen, verwandeln ein Element Effekte in 2D und 3D zu erstellen. Sie können eine Liste von Transformationen angeben, um mehrere Aspekte eines Elements ändern. Wenn mehrere Optionen angegeben werden, jeweils aufgeführt wird in der Reihenfolge angewendet.

Transformation Optionen umfassen die, die in dieser Liste beschrieben:

  • Rahmen - Ändert die Höhe und Breite eines Elements. Sie können zwei Zahlen geben Sie einen anderen Maßstab für Breite und Höhe zu definieren. Jedoch wird dieses Element im allgemeinen nur eine Nummer verwendet, ein Element proportional zu skalieren. Die erste der folgenden Beispiele transformiert das Element auf die Hälfte seiner Größe skaliert, und der zweite wandelt das Element halb so breit und doppelt so hoch:

    -Webkit-transform: Skala (0.5) - Webkit-transform: Skala (2, 0,5) -

  • Übersetzen - Mit dieser Eigenschaft können Übersetzen, oder Verschieben, ein Element von der Position A zur Position B gleichmäßig entlang der x- und y-Achsen. Sie können auch verwenden translateX und translateY zu einer Zeit Elemente entlang nur einer Achse zu bewegen. Zum Beispiel führt dieser Code ein Element 150 Pixel vom linken und 150 von oben zu bewegen:

    -Webkit-transform: translate (150px, -150px) -

  • Schiefe - Mit dieser Eigenschaft können Schiefe, oder die Position eines auf einem vorgegebenen Wert basiert Element ändern, ein Element auf der x- und y-Achse verzerrt. Zum Beispiel könnte dies ein Element 20 Grad auf der x-Achse schräg:

    -Webkit-transform: Skew (15deg, 4deg) -

  • drehen - Mit dieser Eigenschaft können drehen, oder die Position eines auf einem vorgegebenen Wert basiert Element ändern, der den Drehwinkel steuert. Zum Beispiel dreht sich das erste Beispiel in diesem Code-Element 5 Grad nach rechts dreht sich das zweite das Element -5 (negative 5) Grad.

    Wie Sie in der Abbildung sehen kann, gibt er die Fotos auf der rechten Seite und vom Zentrum Bild in diesem Entwurf Winkel links:

    -Webkit-transform: drehen (5deg) - Webkit-transform: rotate (-5deg) -

Im Beispiel SCUBA Website in dieser Figur gezeigt, feststellen, dass die beiden äußeren Bilder nach links und rechts drehen bzw. die CSS-Rotate-Funktion - aber nur auf Safari, Firefox und Chrome. Besuchen Sie die Seite mit IE und die Boxen sind alle in einer geraden Linie, aber sie sehen nicht schlecht auf diese Weise, so dass es keinen Schaden angerichtet.

bild0.jpg

Beachten Sie auch, dass es ein Bild in die Unterseite des Entwurfs versteckt, so dass, wenn Sie das iPad / iPhone von Quer- auf Hochformat Ansicht drehen, Inhalt den gesamten Bildschirm ausfüllt.

Ähnliche

Menü