Beispiel für die Implementierung eines Übersetzungseffekts (transfrom: translate) mit CSS3

Wir verwenden den Parameter „translate“, um Bewegung zu erreichen

translateX: Verschieben entlang der X-Achse. Geben Sie eine positive Zahl ein, um nach rechts zu verschieben, und eine negative Zahl, um nach links zu verschieben.

translateY: Verschieben Sie entlang der Y-Achse. Geben Sie eine positive Zahl ein, um nach unten zu verschieben, und eine negative Zahl, um nach oben zu verschieben.

translateZ: Je größer der Wert, desto näher ist das Bild, das Sie sehen. Je kleiner der Wert, desto weiter ist das Bild, das Sie sehen, von Ihnen entfernt.

translate setzt translateX und translateY gleichzeitig

übersetzen(übersetzenX, übersetzenY)

Der erste Parameter ist die Verschiebung entlang der X-Achse. Geben Sie eine positive Zahl ein, um nach rechts zu verschieben, und eine negative Zahl, um nach links zu verschieben. Der zweite Parameter ist die Verschiebung entlang der Y-Achse. Geben Sie eine positive Zahl ein, um nach unten zu verschieben, und eine negative Zahl, um nach oben zu verschieben.

translate3d setzt translateX, translateY und translateZ gleichzeitig, so dass Sie drei Parameter eingeben können
übersetzen3d()

transformieren: übersetzen3d(0,-50%,-50px)

Der erste Parameter ist die Verschiebung entlang der X-Achse. Geben Sie eine positive Zahl ein, um nach rechts zu verschieben, und eine negative Zahl, um nach links zu verschieben. Der zweite Parameter ist die Verschiebung entlang der Y-Achse. Geben Sie eine positive Zahl ein, um nach unten zu verschieben, und eine negative Zahl, um nach oben zu verschieben. Der dritte Parameter ist die Verschiebung entlang der Z-Achse. Je größer der Wert, desto näher ist das Bild, das Sie sehen, bei Ihnen. Je kleiner der Wert, desto weiter ist das Bild, das Sie sehen, von Ihnen entfernt.

Dies ist das Ende dieses Artikels mit Beispielen zum Erzielen eines Übersetzungseffekts (transfrom: translate) mit CSS3. Weitere Informationen zur CSS3-Übersetzung transfrom: translate finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!