transform
La propriété transform permet de modifier l'espace de coordonnées utilisé pour la mise en forme visuelle. Grâce à cette propriété, il est possible de translater les éléments, de les tourner, d'appliquer des homothéties, de les distordre pour en changer la perspective.Si la propriété a une valeur différente de none, un contexte d'empilement sera créé. Dans ce cas, l'objet agira comme le bloc englobant pour les éléments qu'il contient et qui ont la propriété position: fixed.
La propriété transform peut être définie avec le mot-clé none ou une ou plusieurs valeurs de type <transform-function>.
Il est possible de mettre plusieurs fonctions dans la propriété transform simplement en les faisant se suivre séparées par un espace. L'ordre dans lequel on les déclare est important car elles sont appliquées de la droite vers la gauche. La dernière fonction déclarée sera la première appliquée à l'élémént.
<style>
.fond {
width: 300px;
height: 150px;
border: 1px dotted black;
}
p {
border: 3px solid red;
transform: translate(100px) rotate(20deg);
transform-origin: 0 -250px;
}
</style>
<div class="fond">
<p>translate + rotate</p>
</div>
translate + rotate