Vos résultats de recherche

    skew()

    La fonction skew() permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important.

    Syntaxe

    skew(ax)       ou
skew(ax, ay)

    Valeurs

    ax
    Une valeur de type <angle> qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).
    ay
    Une valeur de type <angle> qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).
    Coordonnées cartésiennes sur ℝ2 Coordonnées homogènes sur ℝℙ2 Coordonnées cartésiennes sur ℝ3 Coordonnées homogènes sur ℝℙ3
    1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
    [1 tan(ay) tan(ax) 1 0 0]

    Exemples

    Utiliser une distorsion sur l'axe horizontal

    HTML

    <p>toto</p>
<p class="transformation">truc</p>

    CSS

    p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
 /* the same as skewX(10deg); */
  transform: skew(10deg);
  background-color: blue;
}

    Résultat

    Utiliser deux angles

    HTML

    <p>toto</p>
<p class="transformation">truc</p>

    CSS

    p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  transform: skew(10deg, 10deg);
  background-color: blue;
}

    Résultat

    Étiquettes et contributeurs liés au document

    Étiquettes : 
     Contributeurs à cette page : SphinxKnight, prayash
     Dernière mise à jour par : SphinxKnight,