Comment utiliser des transformations CSS3

CSS3 inclut la capacité à appliquer des transformations géométriques sur tout élément dans votre page Web HTML5. Cela fournit un niveau remarquable de contrôle visuel pas disponibles auparavant pour les développeurs web.

La transformer attribut vous permet d'appliquer une transformation mathématique à tout div. Lorsque vous appliquez transformer à un élément, vous devez appliquer une ou plusieurs des paramètres suivants pour décrire le type de transformation:

  • traduire: Déplace l'objet à partir de sa position par défaut. Traduction nécessite deux paramètres, une mesure de X et Y d'une mesure. Utilisez les unités standard de mesure de la CSS.

  • tourner: Pivoter l'image autour de sa valeur centrale. Prend un paramètre, une mesure d'angle en degrés. (Par exemple, 30 degrés est 30deg.)

  • échelle: Modifie la taille de l'objet. Les changements de version standards à la fois la taille horizontale et verticale de manière uniforme. La scaleX et scaley attributs peuvent être utilisés pour ajuster l'échelle le long d'un axe individuel. L'échelle est mesurée dans les unités standard de mesure de la CSS. Si l'échelle est plus grand que 1, l'objet est plus grand que l'original. Une échelle entre zéro et un fait le point inférieure à ce qu'elle était.

  • skew: Cela vous permet d'incliner l'élément d'un certain angle. Le paramètre nécessite une mesure d'angle en degrés. La skewX et skewY variations permettent un contrôle plus complet de la transformation.

Vous pouvez combiner plusieurs paramètres en les énumérant après l'attribut transform séparés par des espaces.

Pour illustrer, imaginez l'extrait HTML suivant:

case 1
case 2
case 3
case 4
la case 5

Le code montre cinq identiques divs. À titre d'illustration, tous les divs partager la même CSS commune:

# box1, # box2, # box3, # box4, box5 # {width: 100px; hauteur: 80px; border: background-color noir solide 3px: jaune}

Appliquer les variations de l'attribut à chaque élément pour voir comment les transformations fonctionnent.

image0.jpg
# box2 {transform: traduire (100px, 0px) -} # box3 {transform: rotate (45deg) -} # box4 {transform: échelle (2) traduit (100px, 0px) -} # box5 {transform: inclinaison (3) -}

Notez que le support du navigateur est en train de changer sur cet élément. Chrome et Safari attendent toujours le -webkit préfixe, mais Firefox et Opera soutiennent la version non préfixée. IE 10 fonctionne théoriquement avec la version standard, mais la version 9 exige la -Mlle- préfixe, et les versions antérieures de IE ignorent tout simplement les transformations tout à fait. Si vous affichez le code source du site transform.html, vous verrez plusieurs versions pour gérer les différents navigateurs:

 # box2 {transform: traduire (100px, 0px) - webkit-transform: traduire (100px, 0px) - ms-transform: traduire (100px, 0px) -}

Finalement, le bon sens se dégager et préfixes spécifiques au fournisseur ne sera plus nécessaire, mais pour le moment, il est plus sûr de les mettre tous en place. Si vous voulez attraper les anciennes versions de Firefox et Opera, vous pouvez également inclure ces (-moz- et -o-) Préfixes ainsi.


» » » » Comment utiliser des transformations CSS3