Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

Attribut TRANSFORM

Rôle

L’attribut transform permet d’utiliser des fonctions de transformation pour manipuler l’élément html dans l’espace 2D ou 3D

Les fonctions de transformation sont :

  •  Translation : permet de déplacer sur les axes X, Y et Z un élément HTML par rapport à sa position d’origineCette fonction est gérer par translate().
    Syntaxe :
    transform : translate(20px,10px)Dans l’exemple ci dessous le cadre rouge représente la position d’origine du bloc orange qui est déplacé en X (20px) et en Y (30px).
  •  Rotation : permet d’effectuer une de rotation à un élémentCette fonction est gérer par rotate().
    Syntaxe :
    transform : rotate(10deg)Dans l’exemple ci dessous le cadre rouge représente la position d’origine du bloc orange qui pivote d’un angle de 10 degrés. Par défaut la rotation s’effectue à partir du milieu de l’élément
  •  Inclinaison : permet de rendre oblique la forme d’un élémentCette fonction est gérer par skew().
    Syntaxe :
    transform : skew(20deg,10deg)Dans l’exemple ci dessous le cadre rouge représente la position d’origine. Le bloc vert s’incline en X (15deg). Le bloc orange s’incline en Y (10deg). Par défaut l’inclinaison s’effectue à partir du milieu de l’élément
  •  Mise à l’échelle : permet de redimensionner un élémentCette fonction est gérer par scale().
    Syntaxe :
    transform : scale(2)Dans l’exemple ci dessous le cadre rouge représente la taille d’origine. La taille du bloc orange a été réduite (0.8 fois la taille d’origine). Par défaut la mise à l’échelle s’effectue à partir du milieu de l’élément
  •  Matrice de transformation : permet de regrouper plusieurs fonctions de transformation dans une matriceCette fonction est gérer par matrix().
    Syntaxe :
    transform : matrix(0.9, -0.05, -0.375, 1.375, 220, 20)Dans l’exemple ci dessous le cadre rouge représente la position d’origine. Le bloc orange a subi plusieurs transformation à partir de la matrice ().

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.transform

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut transform est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -ms-(Internet Explorer…), -webkit- (Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)

Valeurs

Les différentes valeurs de l’attribut transform sont:

none
Aucune transformation
Syntaxe :
transform : none
matrix
Utilisation d’une matrice à 6 valeurs
Syntaxe :
transform : matrix(n,n,n,n,n,n)
matrix3d
Utilisation d’une matrice à 16 valeurs. A lire cet article (en anglais) sur matrix3D
Syntaxe :
transform : matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
translate
Translation en X et en Y
Syntaxe :
transform : translate(12px,20px)
translate3d
Translation en X, en Y et en Z. La dimension Z est la profondeur, c’est à dire la distance apparente qui sépare l’observateur et l’élément
Syntaxe :
transform : translate3d(12px,20px,30px)
translateX
Translation en X
Syntaxe :
transform : translateX(12px)
translateY
Translation en Y
Syntaxe :
transform : translateY(22px)
translateZ
Translation en Z. La dimension Z est la profondeur, c’est à dire la distance apparente qui sépare l’observateur et l’élément
Syntaxe :
transform : translateZ(22px)
scale
Augmente ou diminue les dimensions d’un élément. Vous pouvez utiliser un nombre ou deux (pour les axes X et Y). Chaque nombre représente un coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scale(0.82,2)
scale3d
Augmente ou diminue les dimensions d’un élément. Vous pouvez utiliser un nombre ou trois (pour les axes X Y et Z). Chaque nombre représence le coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scale3d(0.82,2,3)
scaleX
Augmente ou diminue les dimensions d’un élément sur l’axe X. Il faut utiliser un nombre qui représente le coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scaleX(0.82)
scaleY
Augmente ou diminue les dimensions d’un élément sur l’axe Y. Il faut utiliser un nombre qui représente le coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scaleY(2)
scaleZ
Augmente ou diminue les dimensions d’un élément sur l’axe Z. Il faut utiliser un nombre qui représente le coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scaleZ(2)
rotate
Permet de faire pivoter un élément. Il faut fournir l’angle de rotation en argument
Syntaxe :
transform : rotate(20deg)
rotate3d
Permet de gérer les rotations de l’élément dans l’espace 3D.
Syntaxe :
transform : rotate3d(1,1,1,60deg)
rotateX
Permet de gérer la rotation de l’élément sur l’axe X dans l’espace 3D.
Syntaxe :
transform : rotateX(60deg)
rotateY
Permet de gérer la rotation de l’élément sur l’axe Y dans l’espace 3D.
Syntaxe :
transform : rotateY(60deg)
rotateZ
Permet de gérer la rotation de l’élément sur l’axe Z dans l’espace 3D.
Syntaxe :
transform : rotateZ(60deg)
skew
Permet de gérer l’inclinaison sur les axes X et Y. Vous pouvez utiliser une valeur d’angle ou deux (pour les axes X et Y)
Syntaxe :
transform : skex(0, 20deg)
skewX
Permet de gérer l’inclinaison sur l’axe X. Vous devez utiliser une valeur d’angle
Syntaxe :
transform : skewX(20deg)
skewY
Permet de gérer l’inclinaison sur l’axe Y. Vous devez utiliser une valeur d’angle
Syntaxe :
transform : skewX(20deg)
initial
Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
transform : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
transform : inherit

A voir aussi

transition– transition-duration– transition-property– transition-timing-function

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »