Tutoriel sur la propriété CSS rotate

La propriété CSS rotate permet de faire tourner ou pivoter un élément autour de son point d'ancrage(axe de rotateation).

Syntaxe générale de la propriété CSS rotate

La syntaxe de la propriété rotate est la suivante :

		selecteur {
			transform: rotate(angle);
		}

où `angle` est l'angle de rotation en degrés. Il peut être positif ou négatif, et peut être exprimé soit en :

deg : un degré correspond à 1/360 d'un cercle complet.
grad : Un gradian correspond à 1/400 d'un cercle complet.
rad : Un radian (1rad) correspond à la mesure de l’angle au centre dont les côtés interceptent un arc de cercle dont la longueur est égale au rayon du cercle.. Un cercle complet est égal à 2π radians, soit 6,2832rad ou 360deg.
turn : Un tour correspond à un cercle complet. Ainsi, la moitié d'un cercle est égale à 0,5turn, soit 180 degrés.

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

Valeurs possibles de la propriété CSS rotate

Les valeurs possibles pour la propriété rotate sont :

Angles en degrés (par exemple `45deg`)
Angles en radians (par exemple `0.7854rad`)

Exemples pratiques d'utilisation de la propriété CSS rotate

Voici un exemple d'utilisation de la propriété rotate pour faire tourner ou pivoter des carrés :

Exemple : Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple la propriété rotate css</title> 
<style>
		#conteneur {
			display: flex;
			align-items: center;
			justify-content: center;
			width:400px;
			height: 200px;
			background-color: #eaeaea;
		}
		.box {
			width: 100px;
			height: 100px;
			background-color: #3c3c3c;
			transform-origin: center;
			margin-right: 20px;
			padding:20px 5px;
			color:#fff;
			box-shadow: 7px 7px 20px 0px rgb(253 251 251 / 30%), 40px 40px 10px -40px rgb(233 230 230 / 60%) inset;
		}
		.box:nth-child(2) {
			transform: rotate(45deg);
		}
	
		.box:nth-child(3) {
			transform: rotate(-45deg);
			
		}
</style>
</head>
<body>

<h1>La propriété css rotate</h1>
<div id="conteneur">
		<div class="box">sans rotation </div>
		<div class="box">rotate(45deg);</div>
		<div class="box">rotate(-45deg);</div>
	</div>

</body>
</html>

Résultat :

sans rotation

rotate(45deg);

rotate(-45deg);

Dans cet exemple, les trois carrés sont positionnés côte à côte grâce à la propriété `display: flex`. Le deuxième carré est tourné de 45 degrés avec la propriété `transform: rotate(45deg)`, tandis que le troisième carré est tourné de -45 degrés avec la propriété `transform: rotate(-45deg)`. Le point d'ancrage est placé au centre des carrés grâce à la propriété `transform-origin: center`.

Exemple :Annimation de la propriété rotate css

Cet exemple fourni une démonstration de l'utilisation de la propriété CSS rotate pour effectuer des rotations sur des boîtes lorsqu'elles sont survolées avec la souris.

Exemple : Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple Annimation de la propriété rotate css</title> 
<style>
html, body{
  height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background: #00136c;
  color:#fff;
}

p{
  font-size: 24px;
  color:#fff;
}

.container{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.box {
  width: 150px;
  height: 150px;
  background-color: skyblue;
  border: solid 2px #db3951; 
  color: #00136c;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:.5s ease-in-out;
}

.box:first-child:hover{
  rotate: 45deg;
}

.box:nth-child(2):hover{
  rotate: 3.1416rad;
}

.box:nth-child(3):hover{
  rotate: -50grad;
}

.box:last-child:hover{
  rotate: 1.75turn;
}
</style>
</head>
<body>

<h1>La propriété css rotate</h1>
<p>Survolez chaque boîte avec la souri pour qu’elle tourne</p>
<div class="container">
  <div class="box">
  <strong>rotate: 45deg;</strong>
</div>
<div class="box">
  <strong>rotate: 3.1416rad;</strong>
</div>
<div class="box">
  <strong>rotate: -50grad;</strong>
</div>
<div class="box">
  <strong>
    rotate: 1.75turn;
  </strong>
</div>
</div>
</body>
</html>

Dans cet exemple une transition de 0,5 seconde est appliquée pour créer une animation fluide lors du survol par la souri de chque boite

Astuces et conseils d'utilisation de la propriété CSS rotate

Voici quelques astuces et conseils pour utiliser la propriété rotate de manière efficace :

Les valeurs négatives de l'angle permettent de faire tourner ou pivoter l'élément dans le sens inverse des aiguilles d'une montre.
La propriété transform-origin permet de choisir le point d'ancrage de la rotation. Par défaut, le point d'ancrage est le centre de l'élément.
La propriété `transform` peut être combinée avec d'autres propriétés de transformation, comme `translate` ou scale, pour créer des effets plus complexes.
La propriété transform fonctionne mieux avec des éléments simples, comme des formes géométriques, plutôt qu'avec des images ou des éléments plus complexes.
Il est important de bien comprendre l'angle de rotation et de l'utiliser judicieusement pour éviter des effets indésirables ou gênants pour l'utilisateur.

En utilisant la propriété rotate de manière efficace, vous pouvez créer des designs web originaux et dynamiques, et apporter une touche de créativité à vos projets.