conversion CSS3 2D

Conversion CSS3

transition CSS3, nous pouvons être déplacé, mis à l'échelle, à son tour, faire pivoter et éléments extensibles.

Comment ça marche?

L'effet de la conversion, de sorte qu'un élément pour changer la forme, la taille et la position.

Vous pouvez convertir vos éléments 2D ou 3D.

support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.

Immédiatement après la -webkit- numérique, -ms- ou -moz- il y a à l'appui du préfixe d'attribut premier numéro de version du navigateur.

Internet Explorer 10, Firefox et Opera supporte transformer la propriété.

Chrome et Safari nécessite la version du préfixe.

Remarque: Internet Explorer 9 nécessite la version du préfixe.

conversion 2D

Dans ce chapitre, vous apprendrez la méthode de conversion 2D:

• translate ()
• tourner ()
• scale ()
• skew ()
• Matrice ()

Dans le chapitre suivant, vous apprendrez la conversion 3D.

Exemples

div { transform: rotation (30 °) ; - Ms-transform: rotation (30 °) ; / * IE 9 * / - webkit-transform: rotation (30 °) ; / * Safari et Chrome * / }

Essayez »

méthode translate ()

Méthode (), selon la gauche (axe X) et la partie supérieure (axe Y) la position du paramètre donné, se déplace de la position actuelle de l'élément.

Exemples

div { transform: translate (50 px, 100 px) ; - Ms-transform: translate (50 px, 100 px) ; / * IE 9 * / - webkit-transform: translate (50 px, 100 px) ; / * Safari et Chrome * / }

Essayez »

traduire valeur (50px, 100px) est un élément mobile 50 pixels de la gauche, et déplacé 100 pixels à partir du haut.

méthode rotate ()

tourner la méthode (), dans un nombre donné de degrés dans une rotation dans le sens horaire des éléments. Une valeur négative est autorisée, ceci est une rotation anti-horaire des éléments.

Exemples

div { transform: rotation (30 °) ; - Ms-transform: rotation (30 °) ; / * IE 9 * / - webkit-transform: rotation (30 °) ; / * Safari et Chrome * / }

Essayez »

valeur rotate (30deg) des éléments en rotation de 30 degrés dans le sens horaire.

méthode scale ()

Procédé d'échelle (), ce qui augmente ou diminue la taille de l'élément, en fonction de la largeur (axe X) et la hauteur (axe Y) paramètres:

Exemples

-ms-transform: scale (2,3) ; / * IE 9 * / -webkit-transform: scale (2,3); / * Safari * / transformation: échelle (2,3); / * syntaxe standard * /

Essayez »

échelle (2,3) largeur de transition est deux fois sa taille d'origine, et trois fois la taille de sa hauteur initiale.

méthode skew ()

Procédé d'inclinaison (), l'élément selon la direction transversale (axe X) et les paramètres de la ligne verticale (axe Y) pour un angle donné:

Exemples

div { transform: inclinaison (30 °, 20 °) ; - Ms-transform: inclinaison (30 °, 20 °) ; / * IE 9 * / - webkit-transform: inclinaison (30 °, 20 °) ; / * Safari et Chrome * / }

Essayez »

obliquité (30deg, 20deg) est un élément de l'axe X et l'axe Y d'environ 20 degrés à environ 30 degrés.

Procédé de matrice ()

Procédé matrice () et le procédé de conversion 2D fusionnées en une seule.

méthode de la matrice a six paramètres, y compris la rotation, mise à l'échelle, le déplacement (panoramique) et les fonctions d'inclinaison.

Exemples

L'utilisation de la matrice () de rotation élément div 30 °

div { transform: matrice (0,866, 0,5, - 0,5, 0,866, 0, 0) ; - Ms-transform: matrice ( 0,866, 0,5, - 0,5, 0,866, 0, 0) ; / * IE 9 * / - webkit-transform: matrice (0,866, 0,5, - 0,5, 0,866, 0, 0) ; / * Safari et Chrome * / }

Essayez »

Nouvelle propriété de conversion

Voici une liste de toutes les propriétés de conversion:

méthode de conversion 2D