Tutoriel CSS : La propriété transform

OUJOOD.COM

Tutoriel CSS : La propriété transform

La propriété CSS transform permet d'appliquer des transformations 2D ou 3D aux éléments HTML. Elle est très utile pour effectuer des manipulations visuelles sur les éléments, tels que la rotation, le redimensionnement, la translation, l'inclinaison, etc.

Syntaxe générale

La syntaxe générale de la propriété transform est la suivante :

transform: fonction(valeur);

Valeurs par défaut	none
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.transform="rotate(7deg)"

La fonction spécifie le type de transformation à appliquer, et la valeur détermine les paramètres de la transformation.

Exemples pratiques d'utilisation

Voici quelques exemples pratiques d'utilisation de la propriété transform :

Rotation

Pour effectuer une rotation de 45 degrés sur un élément :

transform: rotate(45deg);

Exemple : 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>La propriété CSS transform</title>
<style>
.element {
  display: inline-block;
  background-color: #0074d9;
  height: 100px;
  width: 100px;
  margin-right: 5px;
  margin-left: 5px;
   animation: roll 3s infinite;
  transform: rotate(30deg);
  opacity: .7;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.conteneur {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
</head>
<body>

<h1>La propriété transform CSS avec la fonction css skewX() animée</h1>
<div class="conteneur">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</body>
</html>

Redimensionnement

Pour redimensionner un élément à 150% de sa taille initiale :

transform: scale(1.5);

Translation

Pour déplacer un élément de 50 pixels vers la droite et 20 pixels vers le bas :

transform: translate(50px, 20px);

Inclinaison

Pour incliner un élément de 30 degrés :

transform: skew(30deg);

Exemple : 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>La propriété CSS transform</title>
<style>
.element {
  display: inline-block;
  background-color: #0074d9;
  height: 100px;
  width: 100px;
  margin-right: 5px;
  margin-left: 5px;
  animation: skew 3s infinite;
  transform: skew(20deg);
  animation-direction: alternate;
}

@keyframes skew {
  0% {
    transform: skewX(20deg);
  }
  100% {
    transform: skewX(-20deg);
  }
}

.conteneur {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
</head>
<body>

<h1>La propriété transform CSS avec la fonction css skewX() animée</h1>
<div class="conteneur">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</body>
</html>

Perspective 3D

Pour créer un effet de perspective 3D sur un élément :

transform: perspective(500px);

Combinaison de transformations

Il est possible de combiner plusieurs transformations en utilisant la propriété transform. Par exemple, pour effectuer une rotation et une translation simultanément :

transform: rotate(45deg) translate(50px, 20px);

Astuces et conseils d'utilisation

Expérimentez avec les différentes fonctions de transformation pour obtenir les effets visuels souhaités.
Utilisez les valeurs négatives pour inverser les transformations.
Utilisez la propriété transform-origin pour spécifier le point d'origine des transformations.
Utilisez la propriété transition pour créer des animations fluides lors des transformations.
Assurez-vous de prendre en compte la compatibilité avec les différents navigateurs en utilisant les préfixes appropriés.

En conclusion, la propriété transform est un outil puissant pour effectuer des transformations visuelles sur les éléments HTML. Elle offre de nombreuses possibilités créatives pour améliorer l'aspect visuel de votre site web. Expérimentez avec les différentes fonctions et valeurs pour obtenir les résultats souhaités.

Transformations 3D

La plupart des propriétés ci-dessus ont des versions 3D.

translate3d(x, y, z)
translateZ(z)

La troisième valeur de translate3d ou la valeur de translateZ rapproche l'élément de l'observateur, les valeurs négatives l'en éloignent.

scale3d(sx, sy, sz)
scaleZ(sz)

La troisième valeur de scale3d ou la valeur de scaleZ affecte la mise à l'échelle le long de l'axe z (par exemple, la ligne imaginaire qui sort directement de l'écran).

rotateX(valeur)
rotateY(valeur)
rotate3d(x, y, z)

rotateX et rotateY font tourner un élément dans l'espace 3D autour de ces axes. rotate3d vous permet de spécifier un point dans l'espace 3D autour duquel faire tourner l'élément.

matrix3d(...)

Une manière de décrire par programme une transformation 3D dans une grille 4×4. Personne n'écrira jamais à la main un de ces programmes, jamais.

Pour les curieux, ceci :

rotate(45deg) translate(24px, 25px)

...peut également être représenté comme suit:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

Perspective

perspective(valeur)

Cette valeur n'affecte pas l'élément lui-même, mais elle affecte les transformations 3D des éléments descendants, ce qui leur permet d'avoir une perspective de profondeur cohérente.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- , -moz- ou -o- indiquent la première version qui fonctionne avec un préfixe.

Propriété
transform (2D)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform (3D)	36.0 12.0 -webkit-	12.0	10.0	9.0 4.0 -webkit-	23.0 15.0 -webkit-