Hexa PAGE - Classes - Transformations

Hexa PAGE - Les classes

Rotation

<p class="hx-rotate-90">Texte vertical</p> 
<p class="hx-rotate-180">Texte retourné</p>

L'élément est incliné d'un certain nombre de degrés.

• hx-rotate-[deg]
  Rotation à droite de [deg] degrés où [deg] = i x 10 (i = 1..18)
• hx-rotate--[deg]
  Rotation à gauche de [deg] degrés où [deg] = i x 10 (i = 1..18)

Effet de profondeur

// Effet Star Wars - Introduction s'enfonçant dans l'espace 
<p class="hx-depth-h-70">Il y a bien longtemps, dans une galaxie lointaine, très lointaine...</p>

Un effet de profondeur est appliqué à l'élément - généralement une image - suivant un degré de rotation autour de l'axe horizontal ou vertical.

• hx-depth-h-[deg]
  Profondeur horizontale de [deg] degrés où [deg] = i x 10 (i = 1..18)
• hx-depth-h--[deg]
  Profondeur horizontale inverse de [deg] degrés où [deg] = i x 10 (i = 1..18)
• hx-depth-v-[deg]
  Profondeur verticale de [deg] degrés où [deg] = i x 10 (i = 1..18)
• hx-depth-v--[deg]
  Profondeur verticale inverse de [deg] degrés où [deg] = i x 10 (i = 1..18)

Transparence

<p class="hx-transparent-50">Texte effacé à 50%</p>

L'élément, ainsi que tous ceux qu'il contient, sont affectés d'un pourcentage de transparence. A 100%, ils deviennent invisibles.

• hx-transparent-[pct]
  Transparence de [pct] % où [pct] = i x 10 (i = 0..10)

Redimensionnement

// Image réduite de moitié 
<p class="hx-resize--50"><img src="..."></p>

L'élément est redimensionné horizontalement et/ou verticalement suivant un pourcentage. Avec cette méthode, l'espace occupé à l'écran demeure celui d'origine.

• hx-resize-[pct]
  Agrandissement en largeur et hauteur de [pct]% où [pct] = i x 10 (i = 1..10)
• hx-resize--[pct]
  Réduction en largeur et hauteur de [pct]% où [pct] = i x 10 (i = 1..10)
• hx-resize-h-[pct]
  Agrandissement en largeur de [pct]% où [pct] = i x 10 (i = 1..10)
• hx-resize-h--[pct]
  Réduction en largeur de [pct]% où [pct] = i x 10 (i = 1..10)
• hx-resize-v-[pct]
  Agrandissement en hauteur de [pct]% où [pct] = i x 10 (i = 1..10)
• hx-resize-v--[pct]
  Réduction en hauteur de [pct]% où [pct] = i x 10 (i = 1..10)