Sommaire

Les Transformation:fonctiontransformations

1. La fonction et le Transformation:point de référencepoint de référence

Pour créer une transformation, utilisez la propriété Transformation:transformtransform. Cette propriété utilise ensuite des fonctions pour appliquer telle ou telle transformation.

Par défaut, toutes les transformations ont comme point de référence le centre de l’élément. Ce point de référence est utilisé pour les calculs des transformations.

Utilisez la propriété transform-origin si vous souhaitez changer de référence. La valeur spécifiée indique alors le nouveau point de référence. Les valeurs acceptées sont :

  • des pourcentages. La valeur par défaut est 50% 50%, soit au milieu de l’élément ;

  • des mots-clés : left, center, right, top, center et bottom ;

  • des valeurs exprimées en pixels.

Voici un premier exemple très simple d’une rotation avec le point de référence par défaut qui est au centre de l’élément.

<!DOCTYPE HTML> 
<html lang="fr"> 
<head> 
<title>La rotation</title> 
<meta charset="UTF-8" /> 
<style> 
   #init { 
       position: absolute; 
       left: 50px; 
        ...